[toc] ## scoped原理 scoped的原理是使用屬性選擇器和類名進行交集選擇，比如`.wrapper[data-v-xxx]{}` 這樣在scoped里寫的css都會有一個隨即生成的`[data-v-xxx]` ## 為什么需要穿透scoped？ scoped看起來很美，但是，在很多項目中，會出現這么一種情況，即：引用了第三方組件，需要在組件中局部修改第三方組件的樣式，而又不想去除scoped屬性造成組件之間的樣式污染。此時只能通過特殊的方式，穿透scoped。 ``` <style scoped> 外層 >>> 第三方組件 { 樣式 } </style> ``` 通過 >>> 可以使得在使用scoped屬性的情況下，穿透scoped，修改其他組件的值。 >[danger] 以上為stylus的穿透方式，如果是sass/less，穿透符為 `/deep/` ### 第二種方式 其實，還擁有一種曲線救國的方法，即在定義一個含有scoped屬性的style標簽之外，再定義一個不含有scoped屬性的style標簽，即在一個vue組件中定義一個全局的style標簽，一個含有作用域的style標簽： ``` <style> /* global styles */ </style> <style scoped> /* local styles */ </style> ``` 此時，你只需要將修改第三方樣式的css寫在第一個style中即可。