deep selector深度作用选择器

前言：Vue的组件中，可以在<style>标签上添加scoped属性，实现组件样式的私有化，不会对全局造成样式污染。

scoped实现样式私有化原理

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

上面代码会通过PostCSS转译成：

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

通过给一个组件中的所有dom节点添加了一个唯一的data属性，并且给css选择器添加当前组件对应的data属性选择器来私有化样式。

深度作用选择器

如果你希望 scoped样式中的一个选择器能够作用得更深，影响到子组件，你可以使用 深度作用选择器>>>。

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

上述代码会转移成：

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

从而实现私有作用域内.b的样式设置。

/deep/的使用

有些像 less、sass之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/操作符设置子组件样式。

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

作用

当使用到第三方样式库，如iview、element-ui、mint-ui、vux-ui等等。想要在某个组件内修改第三方组件样式，又不影响全局的第三方组件样式，可以通过上述方法，在scoped私有作用域内使用深度作用选择器。