Scoped

Scoped

在Vue文件中的style标签上有个特殊的属性，scoped。当一个style标签拥有scoped属性的时候，它的样式只能用于当前的Vue组件，可以使组件的样式不互相污染，如果一个项目的所有style标签都加上了scoped属性，相当于实现了样式的模块化。、

可以在组件中同时拥有scoped和非scoped样式

<style>
/* 全局样式 */
</style>

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

子组件的根元素

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

深度作用选择器

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

注意:

Scoped样式不能代替class，考虑到浏览器渲染各种 CSS 选择器的方式，当 p { color: red } 是 scoped 时 (即与特性选择器组合使用时) 会慢很多倍。如果你使用 class 或者 id 取而代之，比如 .example { color: red }，性能影响就会消除。

在递归组件中小心使用后代选择器! 对选择器 .a .b 中的 CSS 规则来说，如果匹配 .a 的元素包含一个递归子组件，则所有的子组件中的 .b 都将被这个规则匹配。