当<style>标签用scoped属性时,它的css只作用于当前组件中的元素。
混用本地和全局样式
你可以在一个组件中同时使用有作用域和无作用域的样式:
<style>
/*全局样式*/
</style>
<style scoped>
/*本地样式*/
</style>
子组件的根元素
使用scoped后,父组件的样式将不会渗透到子组件中。不过一个子组件的节点会同时受其父组件有作用域的css和子组件有作用域的css的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式。
深度作用选择器
如果你希望scoped样式中的一个选择器能够作用得“更深”,例如影响子组件,你可以使用>>>操作符:
<style>
.a>>>.b{/*...*/}
</style>