### 深度作用选择器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组件的某些标签设置样式: ```css <style lang="less" scoped> .a /deep/ .b { /* ... */ } </style> ``` a是组件A的选择器，b是组件B的选择器，它们会形成如下效果： ```css .a[data-v-f3f3eg9] .b { /* ... */ } ``` 这样.b的css样式就生效了。 > 注意： 某些情况下>>>符号有可能无法正确解析，可以替换为别名 /deep/或::v-deep。 深度作用选择器的左边必须是当前组件的css选择器，右边是子组件标签选择器。