在 vue 中,为了防止 css 污染,会在style
标签上添加一个scoped
属性。所以,如果在父组件将 style 设置为scoped
的时,如果想改变该父组件中引入的子组件样式,则不会生效。如下例:
parent
<template>
<div class="app">
<h1>parent</h1>
<child></child>
</div>
</template>
<style scoped>
.app h2 {
color: red;
}
</style>
child
<template>
<h2>I am child component</h2>
</template>
<style scoped></style>
此时设置的color: red
将不会生效。此时,如果使用 v-deep 选择器,可以解决这个问题。
<style scoped>
.app >>> h2 {
color: red;
}
</style>
如果使用 scss 或者 less 的写法,需要像下面这样写
<style lang="less" scoped>
/deep/ .app {
h2 {
color: red;
}
}
</style>
与上述达到相同的效果,利用深度作用选择器,轻松解决此类问题。
如果觉得我的文章对您有用,请您随意打赏。您的支持将鼓励我更加努力创作!
如无特殊声明,文章均为原创,若有不正之处,万望告知。转载请附上原文地址,十分感谢!