深度作用选择器
什么是深度作用选择器
:
当前组件A 引入一个其他组件B做应用,A组件由于scoped作用,A组件本身的全部html标签都会包含一个 data-v-xxx 的属性名称,使得css样式达到私有效果。被使用的组件B由于某些原因,编译解析后各个html标签不会形成 data-v-xxx 的属性,这样在组件A中给组件B设置样式会导致无效。
- 深度作用选择器: https://vue-loader.vuejs.org/zh/guide/scoped-css.html#
解决
:
- 通过深度作用选择器/deep/ 给B组件的某些标签设置样式:
<style lang="less" scoped>
.a /deep/ .b { /* ... */ }
</style>
a是组件A的选择器,b是组件B的选择器,它们会形成如下效果:
.a[data-v-f3f3eg9] .b { /* ... */ }
这样.b的css样式就生效了。
注意
:
- 某些情况下
>>>
符号有可能无法正确解析,可以替换为别名/deep/
或::v-deep
。 - 深度作用选择器的左边必须是当前组件的css选择器,右边是子组件标签选择器。