vue中css作用域的实现原理_vue 中 style 的私有作用域 scoped 和深度作用选择器 >>> 及 /deep/ 用法...

前言

我们在用 vue 开发项目时，在给当前组件中的元素设置样式，为了不污染全局样式，一般会在当前组件的

实现原理

按 vue 官方解释，scoped 是通过使用 PostCSS 来实现以下转换，以达到不污染全局样式。

.example {

color: red;

}

hi

转换为：

.example[data-v-f3f3eg9] {

color: red;

}

hi

分析后可知，PostCSS 处理组件 scoped 样式时，给 HTML 的 DOM 节点加一个不重复属性 data-v-f3f3eg9 标志唯一性。如果组件内部还有组件，只会给当前的组件增加类似属性，不影响组件内部引用的组件。

深度作用选择器

在使用 scoped 属性后，达到了样式的组件隔离作用，但是如果引用它的父组件，想修改/增加其样式时，只能通过深度作用选择器来实现。

>>> 操作符：

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

有些像 less、sass 之类的 css 预处理语言，无法正确解析 >>>。我们可以使用 /deep/ 操作符取而代之。

/deep/ 操作符：

.a {

/deep/ .b {

/* ... */

}

}

结束语

深度作用选择器实际上违反了 scoped 属性的意义，且过多使用 scoped 会导致页面打包文件体积增大。实际开发中我们应该尽量避免或少使用。可以采用加 class 名称前缀的方式避免样式污染，如：ivu-row-flex-middle。版权属于：瞭月

版权声明：本文为瞭月原创文章，转载请附上原文出处链接和本声明。