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

搬运自：https://blog.csdn.net/qq_39043923/article/details/106918747?%3E?utm_medium=distribute.pc_relevant.none-task-blog-baidujs-1

 

vue项目中，经常需要使用如elementUI等组件库，有些样式直接在组件中修改无效，因为scoped局限于当前组件，去掉scoped的话又会影响全局样式。

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

 

1. >>>

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

<style scoped>
/*编译前*/
.a >>> .b { 
 /* ... */
}

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

 

2. /deep/

项目中用到了预处理器 scss 、sass、less 操作符 >>> 可能会因为无法编译而报错 。可以使用 /deep/
注意：vue-cli3以上版本不可以

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

 

3. ::v-deep

如果使用了预处理器都可以使用 ::v-deep

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