vue中css作用域

当<style>标签用scoped属性时，它的css只作用于当前组件中的元素。

混用本地和全局样式

你可以在一个组件中同时使用有作用域和无作用域的样式：

<style>
/*全局样式*/
</style>
<style scoped>
/*本地样式*/
</style>

子组件的根元素

使用scoped后，父组件的样式将不会渗透到子组件中。不过一个子组件的节点会同时受其父组件有作用域的css和子组件有作用域的css的影响。这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

深度作用选择器

如果你希望scoped样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用>>>操作符：

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

本文来源