本文共 872 字，大约阅读时间需要 2 分钟。

在 Vue 3 中，深度选择器（deep）和全局选择器（>>>）已被废弃，推荐使用 :deep()。使用这些选择器会导致样式污染，可能引发全局样式冲突。

深度选择器的局限性

传统方法中，为了修改三方组件的样式，开发者需要添加自定义样式到组件的 scoped 范围外。这会导致样式污染，可能与其他组件或框架样式产生冲突。

过渡方案

在 Vue 2 中，开发者可以使用 >>> 或 /deep/ 来限制样式影响范围。但这些方法在 LESS 或 SCSS 中存在兼容问题，已被废弃。

推荐方法

在 Vue 3 中，使用 :deep() 是更好的选择。例如：

.container3 {
  :deep(.el-button) {
    background: #444;
  }
}

嵌套深度选择器的限制

尝试嵌套 :deep() 如下：

.container4 {
  :deep(.el-button) {
    :deep(.el-icon) {
      color: #f00;
    }
  }
}

此方法不适用，因为 :deep() 选择器不支持嵌套。深度选择器只能影响直接子级元素，无法递归应用到嵌套结构。

样式解析与编译

深度选择器 /deep/ 或 >>> 在编译时会被转换为空值，相当于直接作用于目标元素。例如：

.no-deep .container1[data-v-f5dea59b] .el-button {
  background: #000;
}

对于 :deep()，编译后会生成类似：

.no-deep .container3[data-v-f5dea59b] .el-button {
  background: #444;
}

当使用嵌套深度选择器时，编译过程会移除 :deep()，导致无法实现递归样式应用。

结论

在 Vue 3 中，使用 :deep() 是唯一支持的深度样式选择器。它支持直接应用于子级元素，但不支持嵌套深度选择器。因此，深度样式调整应尽量避免复杂嵌套结构，以防止样式应用失效。

转载地址：http://rojfk.baihongyu.com/