程序员最近都爱上了这个网站  程序员们快来瞅瞅吧！  it98k网:it98k.com

前言

当 <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 .my_text[data-v-b45036b2] {color: red;}

可见，编译之后的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] .my_text {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] .my_text {color: red;}

总结

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

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

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

原文链接:https://blog.csdn.net/weixin_39357177/article/details/114371187