css - 如何根据全局选择器添加范围样式

Question

所以 Vue 有>>>and/deep/用于在作用域样式中设置子组件的样式：

<style scoped>
.local-class-name >>> .class-name-of-nested-component {
    ...
}
</style>

但我需要的是不同的。如何根据全局类名使用作用域样式设置组件样式？像这样：

<style scoped>
.global-class-name .local-class-name {
    ...
}
</style>

先感谢您！

标签： cssvue.js

Answer 1

我没有注意到它只在选择器的最后部分添加了一个数据属性。

所以上面的例子已经可以工作了，因为它被编译成下面的代码：

.global-class-name .local-class-name[data-v-ab5212] {
    ...
}