私有作用域

大概学了vue都知道,当 style标签有 scoped 属性时，它的 CSS 只作用于当前组件中的元素。

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

<template>
   <div class="example">hi</div>
</template>

转换结果：

<style>
    .example[data-v-f3f3eg9] {
      color: red;
    }
</style>

<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

深度作用选择器
如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 >>> 操作符：

<style scoped>
    .a >>> .b { /* ... */ }
</style>

上述代码将会编译成：

.a[data-v-f3f3eg9] .b { /* ... */ }

后面的类名没有data属性,所以能选到子组件里面的类名,

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

应用:
我们平时用ui框架的时候,并不是完全能满足我们的需求,我们需要去修改它的样式,你会发现你修改不了,因为我们加了scoped,
它只作用于当前组件中的元素.

方式一
我们可以重新写一个css文件修改第三方组件的样式,然后在引入第三方组件后面引入

方式二
在组件再写一个无scoped的style标签

<style>
  /* 全局样式 */
  /* 修改第三方库样式 */
</style>
<style scoped>
  /* 当前组件样式 */
}
</style>

方式三
使用深度作用选择器：

<style scoped>
  /*当前组件类名 >>> 第三方库类名*/
    .component-parent>>>.b{
        background: red;
        height: 30px;
        width: 100%;
    }
</style>

参考文档