CSS样式穿透

为什么需要样式穿透？

1. 引入了第三方组件库（如element-ui、element-plus），并想修改第三方组件库的样式。
2. 样式文件中使用了 scoped 属性，但是为了确保每个组件之间不存在相互影响所以不能去除（去除scoped属性会变成全局样式对其他组件也造成影响）。

样式穿透的三种写法

1. 原生CSS样式穿透 （操作符 >>>）：>>>
   外层 >>> 第三方组件{ 样式 }

.wrapper >>> .el-image {
      width: 100px
}

2. less的样式穿透（深度选择器/deep/） ：/deep/
   项目中用到了预处理器 less ，可以使用 /deep/。
   /deep/ 第三方组件 {样式}

/deep/  .el-table__body-wrapper {
    cursor: pointer;
}

3. scss样式穿透（深度选择器::v-deep）：::v-deep
   ::v-deep 第三方组件 {样式}

::v-deep .el-table::before {
    background-color: transparent;
 }