Vue深度选择器

当我们在Vue组件中需要局部修改其他组件的样式，同时又不想去掉 scoped 属性造成不同组件之间的样式污染，Vue深度选择器应运而生了。

Vue 2.x 的style里，深度选择器有三种写法：

>>>

/deep/

::v-deep

>>> 应用于Css，Sass / Less 之类的预处理器无法正确解析 >>>，这种情况下你可以使用 /deep/ 或 ::v-deep 操作符取而代之——两者都是 >>> 的别名，同样可以正常工作。

Vue 3.x 的style里，暂时只有一种深度选择器写法 :deep()

<style scoped>
.a :deep(.b) {
  /* ... */
}
</style>

上面的代码会被编译成：

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

End----------------------