大家都知道當

編譯前：

.example {

color: red;

}

編譯后：

.example[data-v-f3f3eg9] {

color: red;

}

看完你肯定就會明白了，其實是在你寫的組件的樣式，添加了一個屬性而已，這樣就實現了所謂的私有作用域。但是也會有弊端，考慮到瀏覽器渲染各種 CSS 選擇器的方式，當 p { color: red } 設置了作用域時 (即與特性選擇器組合使用時) 會慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影響就會消除。所以，在你的樣式里，進來避免直接使用標簽，取而代之的你可以給標簽起個class名。

如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符:

.parent >>> .child { /* ... */ }

上述代碼將會編譯成：

.parent[data-v-f3f3eg9] .child {

/* ... */

}

而對于less或者sass等預編譯，是不支持>>>操作符的，可以使用/deep/來替換>>>操作符，例如：.parent /deep/ .child { /* ... */ }

舉個栗子

如果想將swiper當前默認藍色狀態改成白色

默認效果

css樣式可以可以寫

.swiper-pagination-bullet-active{

background: #fff;

}

看看效果會怎樣

重置樣式后效果

這個時候就可以用到深度作用選擇器

/deep/.swiper-pagination-bullet-active{

//使用 scoped 后，父組件的樣式將不會滲透到子組件中。

//使用深度作用選擇器 /deep/ 或者'>>>' ,但注意像sass、less預處理器不認三個箭頭

background: #fff;

}

使用深度作用選擇器后效果

總結

以上是生活随笔為你收集整理的css 深度选择器 ,CSS的coped私有作用域和深度选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。