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>