css深度选择器总结

在引入其他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>