样式穿透 >>>、/deep/ 、::v-deep 、:deep()应用场景

1、 >>> 应用场景

如果项目使用的是原生css 样式，那么你可以直接使用 >>> 穿透

#se >>> .el-input__inner {
  line-height: 32px;
  height: 32px;
}

2、/deep/ 应用场景

如果项目使用了预处理器 scss 、less ，>>>可能会由于无法编译而报错 。可以使用 /deep/ 穿透
注意：vue-cli3以上版本不可以

#se /deep/.el-range-editor.el-input__inner,
.el-select {
  width: 100%;
}

3、::v-deep 应用场景

如果项目使用了预处理器，::v-deep 通用

  ::v-deep .el-tooltip__popper {
    max-width: 30px;
  }

4、:deep() 应用场景

vue3.0项目，如果使用了sass预处理器，使用::v-deep深度选择器会抛出如下警告

[@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep(<inner-selector>) instead.

缘由：vue3.0 单文件规范，::v-deep写法已经被废弃了，修改为如下方式

 :deep(.el-tooltip__popper) {
    max-width: 30px;
  }