在Vue項目中用的比較多的就是組件，為了實現組件的樣式模塊化。我們通常會在style標簽中添加一個scoped屬性，這樣css樣式只能作用於當前的Vue組件。使組件之間的樣式相互獨立，當調用該組件的時候就不會影響其他組件樣式或者被其他組件中的樣式所干擾。
一、什么是scoped
scoped是Vue中引入的處理樣式屬性，目的是使樣式私有化（模塊化），不對全局造成污染。使用該屬性會在該為該組件自動添加一個唯一的屬性為組件內的CSS 樣式定作用域，該屬性使用了data-v-hash（hash是隨機的哈希值）的方式來對模塊進行標識。當我們在組件的style標簽中添加scoped屬性后，Vue在對該組件進行編譯后會組在件里面的dom元素中添加data-v-hash屬性。
二、什么是scoped穿透
scoped的確很好用，但是並不是所有組件中的樣式都能滿足我們的項目需求，有時候我們還是希望根據項目需求適當的修改下組件中的樣式。特別是當我們引用第三方組件庫時，在不修改原組件樣式的基礎上對組件樣式進行適當的調整。這就需要用到特殊的方式來穿透scoped屬性，達到修改擁有scoped屬性的組件中樣式的目的。
三、>>> 操作符
這是CSS中的一種深度作用選擇器，如果你的CSS樣式定義了scss/less等預處理器的話可能無法識別（stylus預處理器的樣式可以穿透）。比如我引用了element中的el-popover組件，現在想重新定義el-popover組件中的樣式。當使用普通的css樣式來定義時就可以使用>>> 操作符來深度操作el-popover組件中的樣式，如下所示：
四、/deep/ 操作符
上面說了如果使用 >>> 操作符來深度操作子組件樣式會失效，那么使用預處理器的時候該怎么辦呢？如果你使用的是預處理器可以使用 /deep/ 操作符（/deep/的意思為深入的，深遠的，是>>>操作符的別名），它跟 >>> 操作符作用一樣可以用來對組件進行深度操作。
五、::v-deep操作符
如果在使用scss預處理器時無法使用 /deep/ 操作符來深度操作DOM元素（Vue cli3.0編譯會報錯：SassError: expected selector），這時可以考慮使用::v-deep操作符，這也是>>>操作符的別名，同樣可以正常工作。
六、擴展CSS中的特殊定位符號
在定義css樣式的時候我們經常會用到一些特殊符號來定位DOM元素，方便快速定位到指定的DOM元素。下面是一些常用的特殊符號及說明：
總結：在此我們建議如果你使用的css/stylus模式可以使用>>> 操作符，如果使用less模式可以使用 /deep/ 操作符，如果使用sass/scss模式可以使用::v-deep操作符來實現深度作用選擇器操作。