css deep深度作用选择器

前言

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

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

原理

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

例子

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

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

<div data-v-b45036b2></div>

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

 <div data-v-b45036b2 data-v-384b136e ></div>

以下是父组件的节点：

<div class="wrap">
    <child></child>
</div>

以下是child子组件的节点：

<template>
  <div>
    <span class="child">test</span>
  </div>
</template>

父组件CSS：

<style scoped>
    .wrap .child {
      color: red;
    }
</style>

以上css代码编译之后为：

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

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

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

1.混用本地和全局样式

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

<style>
    / * 全局样式 */
    .wrap .child {
          color: red;
    }
</style>

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

</style>

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

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

父组件的CSS用以下写法：

<style scoped>
    .wrap >>> .child {
      color: red;
    }
</style>

以上代码编译之后

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

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

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

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

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

<style scoped>
    .wrap /deep/ .child {
      color: red;
    }
</style>

以上代码编译之后：

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

总结

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

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

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