随手记一记之【Vue Scoped CSS】

使用 vue 的同学一定不会陌生 scoped。如果在

并没有加 scoped 属性在

装换结果为：

html 标签会自动加类似 data-v-f3f3eg9 这样的属性，css 也会用 .example[data-v-f3f3eg9]的方式转换。

子组件根元素

如果想使用 .example .child { }去覆盖子组件中的样式，并不会生效。使用 scoped 后，父组件的样式不会渗透到子组件中。但是子组件的根节点会受影响，这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。

深度作用选择器

如果想让类似 .example .child { } 样式生效，可以使用 >>> 操作符。有些 css 预处理器无法解析 >>> 操作符，可以使用 /deep/ 代替。例如：

编译为：

.example[data-v-f3f3eg9] .child { /* ... */ }

参考

Scoped CSS