在引入其他UI组件的时候因为要改变其组件的样式 一般的选择器是无法改变的 因为是使用的 scoped 会有所限制 如果要直接修改组件内的样式 那么我们需要用到 深度选择器 /deep/
/deep/
当组件内的style有scoped时 就会给当前所有的标签添加一个【data-v-hash】的属性 并且在标签的css的 选择器的结尾加上和属性相同的的字段 这样起到的唯一性作用 实现类似于“作用域”的作用 使得当前组件内的样式只会作用于当前组件内的元素
/deep/ 和 “>>>” 的二者作用是一样的 针对于不同的css预处理器 例如sass 不能解析 “>>>” 属性 这种情况下可以使用/deep/ 它是">>>"的别名 原理相同
附加：
1、>>>
如果项目使用的是css原生项目 那么可以直接用 >>> 进行穿透
<style scoped>/*编译前*/.a >>> .b {/* ... */}/*编译后*/.a[data-v-f3f3eg9] .b {/* ... */ }</style>
2、/deep/
如果项目中用到了预处理器 sass less scss 会因为无法编辑而报错 可以使用/deep/
注意：vue-cli3以上版本不可以
<style lang="scss" scoped>/*用法1*/.a {/deep/ .b {/* ... */}} /*用法2*/.a /deep/ .b {/* ... */}</style>
3、::v-deep 如果使用了预处理器都可以使用
<style lang="scss" scoped>/*用法1*/.a{::v-deep .b {/* ... */}} /*用法2*/.a ::v-deep .b {/* ... */}</style>
