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

// template// css

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

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

// css

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

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

// css

或者

// css

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