color: inherit 实际继承父元素 color 的计算值，若父未显式声明颜色或受 ua 样式干扰，则失效；currentcolor 才是动态响应颜色变化的可靠方案。
color: inherit 拿不到父级颜色，是因为父元素根本没“算出”颜色值
它不是“自动取父级颜色”，而是强制继承父元素 color 的**计算值（computed value）**。如果父元素压根没写 color，或者只靠浏览器默认黑色、currentColor、var(--color) 这类动态值，inherit 就会拿到 initial 或 UA 默认色——看起来就像“没生效”。
常见表现：
- 父容器设了
color: #1e40af，子元素写color: inherit却还是黑色 - 父元素用
color: var(--theme-color)，子元素color: inherit一次生效后，改变量颜色不更新 - 用
normalize.css或reset.css清掉了body的color，导致整棵树的inherit都断链
button、a、select 这些元素必须手动“打通”继承链
它们有强 User Agent 样式，会直接压掉继承行为。只写 a { color: inherit; } 不够，UA 里的 a:link 规则权重更高。
正确做法是显式覆盖所有伪类和控件状态：
a:link, a:visited, a:hover, a:active { color: inherit; }button, input[type="button"], input[type="submit"], select, option { color: inherit; }- 别漏掉
input[type="reset"]和optgroup，部分浏览器对它们也“免疫”继承
currentColor 才是真正能响应变化的上下文载体
color: inherit 是静态快照，currentColor 是动态引用——它取的是“当前元素自身 color 的计算结果”，天然支持多层传递和变量联动。
适用场景：
- 父元素设
color: var(--primary)，子元素用border-color: currentColor，改变量边框立刻变 - SVG 内联图标写
fill: currentColor，图标颜色随文字实时同步 - Shadow DOM 中：
:host { color: var(--theme-color); }+::slotted(*) { color: currentColor; }
注意：currentColor 前提是宿主元素（或父元素）**显式设置了 color**，否则它也会 fallback 到 UA 默认值。
自定义属性和 Shadow DOM 里 inherit 彻底失效
--my-color: inherit 是非法语法，CSS 自定义属性不接受关键字作为值；inherit 也无法跨 shadow boundary 传播。
替代方案只有两个：
- 用
var(--my-color)显式透传变量，而不是依赖继承 - 在 Shadow DOM 内部用
currentColor，但必须确保:host已设color
最常被忽略的一点：你以为写了 color: inherit 就万事大吉，其实它只在父元素明确声明了可计算的 color、且无 UA 干扰时才可靠——其余情况，它只是个安静的摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
