场景

父组件更改子组件的字体颜色，直接使用class命名改变样式没有任何反应。

  1. //父组件
  2. <div class="father">
  3.     <child></child>
  4. </div>
  5. <style scoped>
  6.     .father .child {
  7.       color: red;
  8.     }
  9. </style>
  12. //子组件
  13. <template>
  14.   <div class="child">
  15.     Hello，world！
  16.   </div>
  17. </template>
  18. <style scoped>
  19.     .child {
  20.       color: white;
  21.     }
  22. </style>

scoped原理

在编译组件的时候，如果当前组件内<style>标签上有scoped属性，那么就会在当前所有标签上添加一个【data-v-hash】属性，而当前样式表内的所有末尾选择器后面也会加上该属性，所以编译之后的css中，子组件对应节点的css带上的是父组件的hash，hash值对应不上，就控制不到子组件的样式，所以就使得当前组件内的样式只会作用于当前组件内的元素。
image.png

解析

（1）当 <style> 标签有 scoped属性时，它的 CSS 只作用于当前组件中的元素，不会影响到子组件（非根结点）的样式。
（2）当使用 scoped后，又引用了子组件，想要改变子组件的部分样式时，直接使用class命名改变样式没有任何反应，因为父组件的样式将不会渗透到子组件中，不过一个子组件的根节点会同时受其父组件有作用域的 CSS 和子组件有作用域的 CSS 的影响。
（3）vue 中的/deep/即深度选择器，可以实现仅修改当前页面中引用的某子组件的样式，并且不会全局污染（其他页面引用某子组件的时候，还是默认样式，样式不改变）的效果。
（4）在样式前加上/deep/ 或者>>>就可以达到控制子组件样式的作用，这样设计是为了让父组件可以从布局的角度出发，调整其子组件根元素的样式。