在 CSS 中，::v-deep、:deep() 和 /deep/ 是用于作用于子组件的样式穿透机制，它们的主要目的是允许父组件的样式影响到子组件的内部结构。以前写项目发现大家写法不一，我也一直对这三个穿透的写法有疑惑，今天趁机来整理一下吧。
1. /deep/
-
来源：最早由 Vue.js 提供的一种非标准语法。
-
特点：
- 使用斜杠包裹选择器（如：
/deep/ .child-class {}）。 - 已被废弃，不再推荐使用。
- 使用斜杠包裹选择器（如：
-
兼容性：仅在旧版本的 Vue 和一些特定的构建工具中支持。
2. >>>
-
来源：CSS Modules 的一种语法。
-
特点：
- 使用
>>>符号来穿透子组件（如：>>> .child-class {}）。 - 同样已被废弃或不推荐使用。
- 使用
-
兼容性：主要用于早期的 CSS Modules 实现。
3. ::v-deep
-
来源：Vue 官方推荐的替代方案之一。
-
特点：
- 使用伪元素语法（如：
::v-deep .child-class {}）。 - 在 Vue 2 中广泛使用，但在 Vue 3 中仍然兼容。
- 使用伪元素语法（如：
-
兼容性：适用于大多数现代构建工具，但可能需要额外配置以支持 SCSS 或 Less。
4. :deep()
-
来源：Vue 3 推荐的标准语法。
-
特点：
- 使用函数式的写法（如：
:deep(.child-class) {}）。 - 更符合现代 CSS 的书写规范。
- 使用函数式的写法（如：
-
兼容性：专为 Vue 3 设计，推荐在 Vue 3 项目中使用。
总结
| 语法 | 推荐程度 | 兼容性 | 使用场景 |
|---|---|---|---|
/deep/ | 不推荐 | 已废弃 | 旧版 Vue |
>>> | 不推荐 | 已废弃 | 早期 CSS Modules |
::v-deep | 推荐 | Vue 2 和 Vue 3 兼容 | Vue 2 或向后兼容 |
:deep() | 强烈推荐 | Vue 3 标准 | Vue 3 |
