scoped樣式是Vue提供的一個CSS模塊化方案，它可以讓我們在Vue組件內(nèi)使用局部的樣式而不影響全局的樣式。這種方案是為了解決全局污染問題而引入的。默認情況下，scoped樣式只會作用于當前組件的DOM元素上，而不會影響其他組件的DOM元素。但有時候我們希望通過某種方式讓scoped樣式影響到其他組件或全局，這就需要使用穿透技巧了。

// template// css

上面的代碼中，我們定義了一個Vue組件，其中包含兩個元素都有class為"bar"的p元素。我們想讓其中class為"bar"的元素改變字體顏色為紅色。如果我們只是簡單地在樣式中使用".bar"選擇器，它只會作用于當前組件內(nèi)的class為"bar"的元素上。

但是我們希望這個樣式作用范圍擴大至其他組件內(nèi)也有class為"bar"的元素，怎么辦呢？這就需要使用CSS穿透技巧。

// css

使用">>>"符號可以讓scoped樣式穿透當前組件，影響到其他組件內(nèi)有相同class名的元素。目前，只有Sass和Less預(yù)處理器可以支持">>>"符號，如果使用普通CSS，則無法使用這個符號。

而如果想要影響全局的樣式，則需要笨拙地使用深度選擇器"/deep/"或者"::v-deep"，用法類似。例如：

// css

或者

// css

總的來說，使用scoped樣式可以更好地保證組件的獨立性和可復(fù)用性，而CSS穿透技巧則能夠讓我們更靈活地控制scoped樣式的作用范圍，挖掘出更多的潛力，為我們打造更好的網(wǎng)頁體驗提供更多的可能性。