一：使用scope 定義私有樣式

當我們寫元件時，一般會使用<style scoped></style>這個標籤，加scoped是為了使得樣式只在當前頁面有效，防止出現重名汙染其他元件

編譯前：

<style scoped>
.box header .title{
  background-color: #3d62ad;
}
</style>

 

編譯後:

<style>
.box header .title[data-v-f971ad34] {
  background-color: #3d62ad
 
;
}
</style>

 

這其實就是在元件的樣式上添加了一個唯一的屬性，這樣就實現了私有作用域。 但是這麼做也會有弊端，當

 p { background-color: #3d62ad; }

設定了作用域時 (即元素選擇器與屬性選擇器組合使用時) 會慢很多倍。 如果你使用 class 或者 id 取而代之，比如

p.title {
    background-color: #3d62ad;
}

效能影響就會消除。

所以在scoped作用的樣式裡，儘量避免直接使用元素選擇器，而是使用class選擇器。   二：使用scope無法覆蓋ui元件庫樣式 scope雖然可以很好地解決元件間樣式相互汙染 影響的問題，但同時產生了新的問題， 當我們使用第三方UI元件庫，或者自己的元件庫，或者 子元件樣式覆蓋的時候，發現並不能修改樣式。 這時候又引入了一個 css概念，深度選擇器，我們希望使用scope 的元件 其中的某個樣式作用的更深， 可以覆蓋子元件的樣式。 不適用css預編譯的 和使用 stylus 的可以使用“<<<”

<style scoped>
    >>>.el-collapse-item__header
 
{
        position relative
        padding 0 15px
    }
</style>

<style lang="stylus" scoped>
    >>>.el-collapse-item__header
        position relative
        padding 0 15px
</style>

而對於less或者sass等預編譯，是不支援“>>>”操作符的，可以使用“/deep/”來替換“>>>”操作符，例如：

/deep/.el-collapse-item__header{ position relative padding 0 15px }