css: deep深度作用选择器

2023-07-14 01:37| 来源: 网络整理| 查看: 265

前言

当标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素，不会影响到子组件（非根结点）的样式。

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

原理

在编译组件的时候，如果当前组件内style标签上有scoped属性，那么会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，那么就使得当前组件内的样式只会作用于当前组件内的元素。

例子

值得注意的是,当父组件，子组件同时使用scoped属性时，子组件最外层的标签既会被加上当前组件的hash值，又会加上父级组件的hash值

若父组件样式添加scoped，父组件的所有标签则添加hash：

各自带有自己组件的hash，子组件除了有自己的hash之外，还带上了父组件的hash，子组件最外层标签：

以下是父组件的节点：

以下是child子组件的节点：

test

父组件CSS：

.wrap .child { color: red; }

以上css代码编译之后为：

.wrap .child[data-v-b45036b2] {color: red;}

可见，编译之后的css中，子组件对应节点的css带上的是父组件的hash，hash值对应不上，所以控制不到子组件的样式

难道父组件写上scoped，就没办法控制子组件（非根结点）的样式了吗，那么以上问题要如何解决呢

1.混用本地和全局样式

可以在一个组件中同时使用有作用域和无作用域的样式，把要控制子组件样式的代码写在全局中：

/ * 全局样式 */ .wrap .child { color: red; } /* 本地样式 */

这种形式比较累赘，不够优雅，有没有办法可以在本地样式中控制子组件的样式呢

2. >>> 深度作用选择器（注意，只作用于css）

父组件的CSS用以下写法：

.wrap >>> .child { color: red; }

以上代码编译之后

.wrap[data-v-b45036b2] .child {color: red;}

这样只需要注意css的权重就可以覆盖子组件内的样式了

3.deep（可作用于css/less/scss）

有些像 Sass、Less、Scss 之类的预处理器无法正确解析 >>>。这种情况下你可以使用 /deep/ 操作符取而代之——这是一个 >>> 的别名，同样可以正常工作。

父组件代码只需把>>> 替换成deep即可：

.wrap /deep/ .child { color: red; }

以上代码编译之后：

.wrap[data-v-b45036b2] .child {color: red;} 总结

在增加了scoped属性的组件当中，每个标签都会带上形如【data-v-hash】的属性，父组件和子组件的hash值不一样

按照普通的写法，编译之后的代码hash值对不上，所以父组件不能控制子组件（非根结点）的样式（控制子组件根结点的样式是可以的，前言有说到）

解决办法可以在样式中使用 /deep/ 或者>>>，使得父组件样式的作用深度更深

【本文地址】

今日新闻