前言：Vue的組件中，可以在<style>標(biāo)簽上添加scoped屬性，實現(xiàn)組件樣式的私有化，不會對全局造成樣式污染。

scoped實現(xiàn)樣式私有化原理

<style scoped>
.text {
  color: red;
}
</style>

上面代碼會通過PostCSS轉(zhuǎn)譯成：

<style >
.text[data-v-f3f3eg9] {
  color: red;
}
</style>

通過給一個組件中的所有dom節(jié)點添加了一個唯一的data屬性，并且給css選擇器添加當(dāng)前組件對應(yīng)的data屬性選擇器來私有化樣式。

深度作用選擇器

如果你希望 scoped樣式中的一個選擇器能夠作用得更深，影響到子組件，你可以使用 深度作用選擇器>>>。

<style scoped>
.a >>> .b { /* ... */ }
</style>

上述代碼會轉(zhuǎn)移成：

.a[data-v-f3f3eg9] .b { /* ... */ }

從而實現(xiàn)私有作用域內(nèi).b的樣式設(shè)置。

/deep/的使用

有些像 less、sass之類的預(yù)處理器無法正確解析 >>>。這種情況下你可以使用 /deep/操作符設(shè)置子組件樣式。

<style lang="less" scoped>
.text-box{
  /deep/ input {
     /* ... */ 
  }
}
</style>

作用

當(dāng)使用到第三方樣式庫，如iview、element-ui、mint-ui、vux-ui等等。想要在某個組件內(nèi)修改第三方組件樣式，又不影響全局的第三方組件樣式，可以通過上述方法，在scoped私有作用域內(nèi)使用深度作用選擇器。