currentColor 是浏览器内置关键字，直接继承父元素计算后的文字颜色，伪元素 background-color 等属性可直接使用，无需 color 声明；不支持 background-image 渐变等场景，且不跨 Shadow DOM 透传。
伪元素 background-color 怎么继承父元素文字色
直接用 currentColor。它不是变量，也不是 CSS 自定义属性，而是浏览器内置的“当前文字颜色”关键字，天然可被伪元素的 background-color、border-color、outline-color 等接受。
常见错误是试图用 inherit 或写成 color: currentColor（伪元素没文本内容时无效），或者误以为要配合 color 声明才能生效——其实只要父元素设了 color，子元素或伪元素就能直接取用。
-
::before和::after都支持currentColor，无需额外触发 - 父元素没显式声明
color时，currentColor会回退到浏览器默认文本色（通常是#000），不是透明 - 如果父元素
color是通过rgba()或hsl()设置的，currentColor会完整继承其透明度和色调，不丢失 alpha
currentColor 在 background-image 里能用吗
不能。CSS 渐变、url()、SVG data URI 中的内联颜色值，都不识别 currentColor。它只在属性值直接受支持的地方生效，比如 background-color、border、fill（SVG 元素内）、stroke。
典型翻车场景：想用 background: linear-gradient(to right, currentColor, #fff) —— 这行不通，浏览器会忽略整条声明或降级为 fallback 色。
立即学习“前端免费学习笔记（深入）”；
- 替代方案：用 CSS 自定义属性 +
var(--text-color)，但需手动同步父元素color值 - SVG 图标内嵌在伪元素中时，
fill="currentColor"是有效的（这是 SVG 规范支持，不是 CSS） - 伪元素里用
background-image: url("data:image/svg+xml,%3Csvg... fill='%23000'%3E")这类硬编码写法，无法动态响应颜色变化
为什么设置了 color 但 currentColor 没变
大概率是选择器优先级或继承链断了。伪元素本身没有 color 继承来源，它依赖父元素（即声明 ::before 的那个元素）的计算后 color 值。
常见坑点：
- 父元素用了
color: unset或color: initial，导致currentColor失效 - 父元素
color是通过 JS 动态设置的，但没触发重绘（极少见，但某些旧版 Safari 有缓存行为） - 父元素是
<button>或<input>，其默认color受用户代理样式表控制，且可能被appearance干扰 - 伪元素上写了
color: xxx（哪怕只是color: inherit），会覆盖父级上下文，让currentColor指向伪元素自己的color计算值（而它通常没文本，结果是默认黑）
currentColor 和 CSS 变量混用要注意什么
可以共存，但别混淆职责。currentColor 是运行时实时取值，CSS 变量是静态声明+作用域查找。两者不自动同步。
比如你写 :root { --main-color: currentColor; }，这不会把根元素的 currentColor “绑定”过去——--main-color 会被当成非法值丢弃。
- 正确做法：父元素设
color: var(--main-color)，伪元素用background-color: var(--main-color)；或直接用background-color: currentColor更轻量 - 需要多层主题适配时，
currentColor无法跨 Shadow DOM 透传，此时必须用 CSS 变量 +:host显式桥接 - 在
@media查询里改color，currentColor会立即响应，比 JS 更新变量更可靠
真正难的是当父元素颜色来自复杂层叠（比如多个 !important、inline style、UA 样式混合）时，currentColor 表现完全取决于最终 computed color——这时候查 DevTools 的 Computed 面板比猜更管用。
