vue——css深度作用选择器 ＞＞＞ 、/deep/ 、::v-deep

Vue中使用如element-ui等组件库，有的样式直接在组件中修改无效,原因是scoped会自动在元素上添加一段特殊的标识，如：v-data-254811…等。
因为scoped局限于当前组件，去掉scoped的话又会影响全局样式。

针对这种情况，可以使用深度作用选择器（即样式穿透）

1.>>>
如果项目中使用的是css原生样式，那么可以直接使用>>>穿透修改

<style scoped>
//编译前
.a >>> .b{
}
//编译后
.a[data-v-f3f3eg9] .b { /* ... */ }

2./deep/
项目中用到了预编译器scss、sass、less操作符，>>>可能会应为无法编译而报错。可以使用/deep/,但是vue-cli3.0以上版本不可以使用

<style lang="scss" scoped>
/*用法1*/
.a {
 /deep/ .b { 
  /* ... */
 }
} 
/*用法2*/
.a /deep/ .b { 
  /* ... */
 }
</style>

3. ::v-deep
   如果使用了预编译器都可以使用::v-deep
   vue-cli3.0以上版本可以使用,代替/deep/

<style lang="scss" scoped>
/*用法1*/
.a{
 ::v-deep .b { 
  /* ... */
 }
} 
/*用法2*/
.a ::v-deep .b {
  /* ... */
}
</style>

原文链接：http://www.manongjc.com/detail/17-euyhqjiiwjmiuny.html