浅谈CSS中/deep/ ＞＞＞ ::v-deep属性 进行样式穿透

背景

在开发vue项目中，引入第三方ui组件库，只需要在当前页面修改第三方组件库的样式以做到不污染全局样式。通过在样式标签上使用`scoped`达到样式只制作用到本页面，但是此时再修改组件样式不起作用。

 scoped的作用及实现原理

 作用：当一个style标签拥有scoped属性时，它的CSS样式就只能作用于当前的组件，也就是说，该样式只能适用于当前组件元素。
vue中的scoped属性的效果主要通过PostCSS转译实现，如下是转译前的vue代码：

<style scoped>
.example {
  color: red;
}
</style>
<template>
  <div class="example">hi</div>
</template>

编译后：

<style>
.example[data-v-5558831a] {
  color: red;
}
</style>
<template>
  <div class="example" data-v-5558831a>hi</div>
</template>

所以：PostCSS给一个组件中的所有dom添加了一个独一无二的动态属性。然后，给CSS选择器额外添加一个对应的属性选择器来选择该组件中dom，这种做法使得样式只作用于含有该属性的dom，组件内部的dom。