vue 深度选择器 使样式生效

作用域css

style 带有 scoped 属性时， style下的样式仅用于当前组件的元素，通过PostCSS转换 标签会加上类似

[data-v-f3f3eg9]

混合本地和全局样式

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

深度选择器 （在父组件中给子组件设置样式，使样式生效）（动态创建的 DOM ）

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

 编译之后

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

 某些预处理器（如Sass）可能无法>>>正确解析。在这些情况下，您可以使用组合/deep/或::v-deep组合 - 两者都是别名，>>>并且工作完全相同。