Scoped Css
當(dāng) <style> 標(biāo)簽有 scoped 屬性時，它的 CSS 只作用于當(dāng)前組件中的元素。這類似于 Shadow DOM 中的樣式封裝。它通過使用 PostCSS 來實現(xiàn)以下轉(zhuǎn)換：
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
轉(zhuǎn)換結(jié)果：
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
由轉(zhuǎn)換結(jié)果可見，每一個類名都加上了 hash 值，使樣式只作用于當(dāng)前組件。
修改 element-ui 默認樣式
混用本地和全局樣式
<style>
/* 全局樣式 */
</style>
<style scoped>
/* 本地樣式 */
</style>
抽取到全局 css 文件
在全局 css 文件中重寫覆蓋的樣式，為了不污染全局樣式，可以加個單獨的類名
深度作用選擇器
這是 vue-loader 提供的一種寫法，如果你希望 scoped 樣式中的一個選擇器能夠作用得“更深”，例如影響子組件，你可以使用 >>> 操作符：
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代碼將會編譯成：
.a[data-v-f3f3eg9] .b { /* ... */ }
有些像 Sass 之類的預(yù)處理器無法正確解析 >>>。這種情況下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——兩者都是 >>> 的別名，同樣可以正常工作。
<style scoped lang="scss">
.form {
background-color: #fff;
/deep/ .list{
font-size: 18px;
}
}
</style>
