一.这个与组件作用域 CSS相关
引用官方的话说就是:
“当 <style>
标签带有 scoped
attribute 的时候,它的 CSS 只会影响当前组件的元素”
还有一个小tip
通过 v-html
创建的 DOM 内容不会被作用域样式影响,但你仍然可以使用深度选择器来设置其样式。
二.解决方案
官方提供了一个解决方案:
1.深度选择器
处于 scoped
样式中的选择器如果想要做更“深度”的选择,也即:影响到子组件,可以使用 :deep()
这个伪类:
vue
<style scoped>
.a :deep(.b) {
/* ... */
}
</style>
上面的代码会被编译成:
css
.a[data-v-f3f3eg9] .b {
/* ... */
2. >>> 和 /deep/
1.当项目中使用的 css 原生样式 ,需要使用 >>> 深度选择器来修改 外用第三方组件的样式
语法:外层容器 >>> 组件 { }
<style lang="css" scoped>
.el-button >>> span{
color: '#f00'
}
</style>
3.当项目中使用的 css 扩展语言是 less, 需要使用 /deep/ 或者 ::v-deep 深度选择器来修改 外用第三方组件的样式
&__hongbao::v-deep{
color: var(--hongbao-color);
}
/deep/ &__hongbao{
color: var(--hongbao-color);
}
三.总结:
- stylus的样式穿透 使用>>>(不推荐)
- vue3.0 中使用 /deep/ 会报错,更推荐使用 ::v-deep
3. 对于使用了 css 预处理器(scss 、sass、 less)时,深度选择器 ::v-deep 比较通用
-
::v-deep (scss)
-
/deep/ (less)