inherit在color上不生效的主因是父元素未显式声明color值；currentColor才是稳定继承父级计算后颜色的可靠方案，支持多层传递与shadow DOM穿透。

inherit 关键字在 color 属性上不生效的常见原因

直接说结论：inherit 本身完全合法，但如果你写 color: inherit 却没看到子元素变色，大概率不是语法错，而是父元素压根没明确设置 color 值——浏览器不会“凭空继承”计算后的颜色，只继承显式声明的值。

比如父元素用 color: currentColor 或根本没写 color，子元素的 inherit 就拿不到有效值。CSS 的继承链只传「声明值」，不传「最终渲染值」。

• 检查父元素是否真有 color 声明（哪怕只是 color: #000）
• 避免依赖 currentColor 作为继承源头，它不触发继承传播
• 注意重置样式（如 normalize.css）可能清空了默认 color，导致父级实际是 color: initial

强制子元素继承 color 的可靠写法

想让子元素无条件“跟父级颜色一致”，最稳的方式不是靠 inherit 猜，而是用 currentColor —— 它是 CSS 原生变量，会自动取父级计算后的 color 值，且支持跨多层传递。

示例：

立即学习“前端免费学习笔记（深入）”；

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

.parent { color: #2563eb; }
.child { color: currentColor; } /* ✅ 稳定继承 */
.grandchild { border-color: currentColor; } /* ✅ 可用于其他颜色属性 */

• currentColor 在所有现代浏览器中支持良好（IE9+）
• 它能用于 border-color、fill、stroke 等任何接受颜色的属性
• 比 inherit 更适合组件化场景：父组件改 color，所有用 currentColor 的子元素自动响应

inherit 和 currentColor 混用时的坑

两者语义完全不同，混着用容易掉进“以为一样，其实行为割裂”的陷阱。

• inherit 是继承父元素该属性的**声明值**（如 color: red）
• currentColor 是一个**动态关键字**，始终等于父元素当前计算出的 color 值（哪怕父元素是通过 color: var(--primary) 得来的）
• 如果父元素 color 是 inherit，子元素再写 color: inherit 就会断链——因为继承源是未定义值
• 不要在自定义属性里写 --my-color: inherit，CSS 变量不支持继承关键字

需要穿透 shadow DOM 时怎么办

Web Components 里，inherit 默认无法跨 shadow boundary 传播；currentColor 可以，但前提是宿主元素（host）显式设置了 color。

示例（shadow DOM 内部）：

:host { color: var(--theme-color, #1e40af); }
::slotted(*) { color: currentColor; }

• 必须给 :host 显式设 color，否则 currentColor 无源可溯
• ::slotted(*) 中用 currentColor 才能保证插槽内容颜色同步
• 别指望 inherit 自动穿透，shadow DOM 的样式隔离是硬边界

事情说清了就结束。真正难的不是记住 inherit 或 currentColor，而是每次写颜色逻辑前，先问一句：“这个值，此刻有没有被父级真正‘落下来’？”