vue css作用域---深度选择器

前置条件：使用 scoped 后，父组件的样式将不会渗透到子组件中。

如果希望scoped样式中的选择器“深”，即影响子组件，您可以使用>>>组合器(可用于項目中的css原生样式)：

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

某些预处理器，例如 Sass，可能无法>>>正确解析。在这些情况下，您可以改用/deep/or::v-deep组合器 - 两者都是别名>>>并且工作方式完全相同。基于上面的示例，这两个表达式将被编译为相同的输出：

<style scoped>
.a::v-deep .b { /* ... */ }
</style>

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