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 值，且支持跨多层传递。
示例：
立即学习“前端免费学习笔记（深入）”；
.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，而是每次写颜色逻辑前，先问一句：“这个值，此刻有没有被父级真正‘落下来’？”
