私有作用域
在<style>標(biāo)簽上添加scoped屬性，可以使樣式只在當(dāng)前組件生效，樣式私有化，避免影響其他的組件，造成全局污染。
<template>
<div class="example">hi</div>
</template>
<style scoped>
.example {
color: red;
}
</style>
原理：
上述代碼會通過PostCSS轉(zhuǎn)換成：
<template>
<div class="example" data-v-f3f3eg9>hi</div>
</template>
<style>
.example[data-v-f3f3eg9] {
color: red;
}
</style>
通過給一個組件中的所有dom節(jié)點(diǎn)添加了一個唯一的data屬性，并且給css選擇器添加當(dāng)前組件對應(yīng)的data屬性選擇器來私有化樣式
深度作用選擇器
如果你希望 scoped 樣式中的一個選擇器能夠作用得更深，影響到子組件，你可以使用 深度作用選擇器>>>。
<style scoped>
.a >>> .b { /* ... */ }
</style>
上述代碼會轉(zhuǎn)換成：
.a[data-v-f3f3eg9] .b { /* ... */ }
因?yàn)楹竺娴哪莻€類沒加組件的data屬性選擇器，所以就能選到子組件里面的類了
別名
/deep/是>>>的別名，有些像 Sass，Less 之類的預(yù)處理器無法正確解析 >>>，所以使用/deep/代替
<style scoped>
.a /deep/ .b { /* ... */ }
</style>
應(yīng)用
平時(shí)寫項(xiàng)目肯定會用第三方的組件，比如iview，element-ui，mint-ui，vux-ui，swiper等等，想要修改第三方組件的樣式，但又不想去掉scoped屬性，影響別的組件。
方式一
使用深度作用選擇器：
<style scoped>
外層組件類 >>> 第三方組件內(nèi)部類 {
樣式
}
</style>
方式二
一個組件中可以使用多個style，同時(shí)使用有 scoped 和非 scoped 樣式：
<style>
/* 全局樣式 */
/* 將修改第三方組件的樣式寫在這里 */
/* 組件的最外層標(biāo)簽定義一個唯一類，最好將樣式都寫在這個類名下，以防組件間互相影響 */
</style>
<style scoped>
/* 本地樣式 */
</style>
提示
表層的一些樣式，比如你在HTML頁面中寫出來標(biāo)簽的那些，如果加類名就可以實(shí)現(xiàn)修改樣式，沒必要使用深度選擇器
