为什么你的scoped CSS突然失效了？可能是深度选择器用错了！

文章探讨的深度选择器主要用于解决 UIApp + Vue3 开发中的样式问题，主要从以下方面进行分析：Vue 组件作用域、多端兼容性、预处理器（SCSS）特性以及 scoped 样式的影响。

深度选择原理

深度选择器会移除子选择器的属性限定，使其能匹配子组件 DOM。（注意：无法穿透第三方库组件，除非其未启用 scoped 或开放样式覆盖）。

深度选择器不一定非要在根元素上使用，也可以在组件中使用。

vue框架中

语法	Vue 版本	状态	状态
>>>	Vue 2	废弃	.parent >>> .child
/deep/	Vue 2/3	废弃	.parent /deep/ .child
::v-deep	Vue 2/3	推荐	.parent ::v-deep .child
:deep()	Vue 3.2+	最新	.parent :deep(.child)

H5 与小程序的兼容情况

平台	支持情况	解决方案
H5	>>>、/deep/、::v-deep	现代浏览器均支持 >>> 和 ::v-deep；/deep/ 是旧语法（部分预处理器可能保留兼容）。
微信小程序	不支持 >>> /deep/	使用 ::v-deep 或 :deep()
uni-app	编译时转换 ::v-deep	推荐 ::v-deep

跨端项目（如 uni-app）建议统一使用 ::v-deep，避免因语法差异导致样式失效；

SCSS 中的深度选择器

scss 复制代码

1、位置书写
.parent {
  // ✅ 正确写法（选择器外置）
  ::v-deep .child { color: red; }

  // ❌ 错误写法（SCSS 会生成错误嵌套）
  .child ::v-deep { ... }

  // ✅ Vue 3.2+ 安全写法
  &:deep(.child) {
    font-size: 16px;
  }
}

2、全局样式混合
// 创建穿透混合器
@mixin deep-selector($selector) {
  ::v-deep #{$selector} {
    @content;
  }
}

// 使用
@include deep-selector('.ant-btn') {
  border-radius: 0;
}

Scoped

Scoped 会给选择器添加 $data-v-hash$ 属性（如 .child $data-v-f3f3eg9$ ），确保样式仅作用于当前组件内的元素。此时，父组件无法直接通过普通 CSS 选择器修改子组件的内部样式（子组件的根元素会被 data-v-xxx 隔离）。

1、 scoped 对深度选择器的限制

仅穿透子组件：深度选择器只能穿透当前组件的 scoped 限制，选中子组件的内部元素，但无法穿透自身 scoped 样式（即无法修改当前组件内未被子组件包裹的元素的样式）。
无法穿透第三方组件：若子组件是第三方库（如 element-plus 的 el-button），其内部样式可能也启用了 scoped 或被 shadow DOM 隔离，此时深度选择器可能失效（需通过覆盖全局样式或使用库提供的 class 自定义）。

复杂场景使用

1、穿透到不确定层数

css 复制代码

/* 使用通用子代选择器 */
.parent :deep(.child-container) :deep(*) .target-element {
  /* 样式规则 */
}

/* 更精确的写法 */
.parent :deep(.child-container > *) :deep(.nested-container) .target-element {
  opacity: 0.9;
}

2、多路径选择

css 复制代码

/* 同时针对两种嵌套路径 */
.parent :deep(.path1 .child-c),
.parent :deep(.path2 .child-c) {
  .target-element {
    background: linear-gradient(135deg, #3498db, #8e44ad);
  }
}

3、调试技巧

在浏览器开发者工具中检查编译后的选择器
使用唯一背景色临时标记穿透路径：

css 复制代码

:deep(.level1) { background: rgba(255,0,0,0.1) !important; }
:deep(.level2) { background: rgba(0,255,0,0.1) !important; }

注意事项

1、慎用深度选择器

破坏组件封装性，增加样式耦合
在 Vue/React 中优先考虑 Props 或 CSS 变量传递样式

结语

同学如果你在实践中遇到了不懂的或其他坑，可发在评论区，我会定期解答并更新在文章中；同时欢迎各位同学的指点与交流~