css deep深度作用选择器

前言

当

以上css代码编译之后为：

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

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

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

1.混用本地和全局样式

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

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

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

父组件的CSS用以下写法：

以上代码编译之后

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

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

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

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

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

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

以上代码编译之后：

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

总结

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

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

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

原文链接：https://blog.csdn.net/m0_67402026/article/details/123420818