CSS 样式穿透

一般情况下，是在项目中引入了第三方的 UI 库（例如：ElementUI）时，我们需要通过“样式穿透”来更改样式。

一、语法

样式穿透的语法分为三种：

1. >>>：作用于 CSS 中；
2. ::v-deep：作用于 SASS 中；
3. /deep/：作用于 LESS 中；

注意：所有的样式穿透语法，都只能在局部样式中生效。

父级选择 >>> 选择器 {
样式名: 样式值;
}

父级选择 ::v-deep 选择器 {
样式名: 样式值;
}

父级选择 /deep/ 选择器 {
样式名: 样式值;
}

二、修改 UI 框架的样式

通常我们在使用 UI 框架时，不会完全使用 UI 框架自带的样式，大部分时候都需要手动去更改 UI 框架的自带样式。

更改 UI 框架的自带样式的方式有以下几种：

1. 官方提供的属性；
2. 设置当前组件的局部样式；
3. 提高选择器的权重值；
4. 样式穿透；
5. 添加 !important；
6. 改为全局样式；