文章探讨的深度选择器主要用于解决 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 中的深度选择器
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、 穿透到不确定层数
/* 使用通用子代选择器 */
.parent :deep(.child-container) :deep(*) .target-element {
/* 样式规则 */
}
/* 更精确的写法 */
.parent :deep(.child-container > *) :deep(.nested-container) .target-element {
opacity: 0.9;
}
2、多路径选择
/* 同时针对两种嵌套路径 */
.parent :deep(.path1 .child-c),
.parent :deep(.path2 .child-c) {
.target-element {
background: linear-gradient(135deg, #3498db, #8e44ad);
}
}
3、调试技巧
-
在浏览器开发者工具中检查编译后的选择器
-
使用唯一背景色临时标记穿透路径：
: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 变量传递样式
结语
同学如果你在实践中遇到了不懂的或其他坑，可发在评论区，我会定期解答并更新在文章中；同时欢迎各位同学的指点与交流~
