CSS 样式穿透

CSS 样式穿透（Shadow DOM / 组件作用域）​ 相关的写法，下面直接对比👇

一、核心对比表

二、逐个拆解

1️⃣/deep/（已死）

css

.parent /deep/ .child { color: red; }

• 来自早期 Shadow DOM 规范

• Chrome 曾经支持，后来被 W3C 移除

• 现在Chrome / Firefox / Safari 均已不支持或警告

• Angular 早期文档用过，现在也已废弃

✅结论：别再用了，写了也没用。

2️⃣::deep（半死不活）

css

.parent ::deep .child { color: red; }

• Vue 2 时代用来穿透scoped

• 不是标准 CSS，是Vue 编译器私有的魔法

• 在 Vue 3 中不推荐

✅结论：Vue 2 老项目还能跑，新项目别写。

3️⃣:deep()✅ 当前正统

css

.parent :deep(.child) { color: red; }

• Vue 3官方推荐写法

• 编译时会正确处理scoped

• 语义清晰，函数式写法

• 与 CSS 规范兼容性最好

✅结论：现在只写这个。

4️⃣::v-deep（Vue 2 遗产）

css

.parent ::v-deep .child { color: red; }

• Vue 2 的别名写法

• 和::deep等价

• Vue 3 中已不推荐使用

✅结论：只出现在 Vue 2 老代码里。

三、为什么要有这些东西？

问题根源：scoped样式

vue

<style scoped> .card { color: red; } </style>

Vue 会把它编译成：

css

.card[data-v-abc123] { color: red; }

👉子组件内部的.card不会被命中

解决方案：样式穿透

css

:deep(.el-button) { color: red; }

编译后 ≈ css

[data-v-abc123] .el-button { color: red; }

✅ 成功“钻”进子组件