浅谈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。

通过 `::v-deep` 穿透 (推荐)

允许Sass 、Less之类的预处理器正确解析，并且兼容很多属性

<style lang="sass"> 
   ::v-deep 第三方组件类名 { 样式 !important; } 
</style>

通过 `/deep/` 穿透

有些Sass 、Less之类的预处理器无法正确解析 `>>>`。可以使用 `/deep/`操作符( >>> 的别名)

<style lang="sass"> 
   /deep/ 第三方组件类名 { 样式 } 
</style>

在日常使用`/deep/`的时候， `/deep/`在vue 3.0会报错，还需要移除scoped。

通过 `>>>` 穿透scoped

iview中需要`在组件上使用el-class声明第三方组件类名

<style scoped>
    外层 >>> 第三方组件类名{ 样式 }
</style>