深度作用选择器deep的应用

深度作用选择器

什么是深度作用选择器：

当前组件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样式就生效了。

注意：

1. 某些情况下>>>符号有可能无法正确解析，可以替换为别名 /deep/或::v-deep。
2. 深度作用选择器的左边必须是当前组件的css选择器，右边是子组件标签选择器。