color: inherit 并非主动获取父元素颜色，而是声明继承父元素已计算出的 color 值；它不回溯、不解析变量或 currentColor，仅读取父元素最终确定的 computed value。
inherit 能获取父元素的计算颜色，但不是“不能获取”，而是它根本**不负责“获取”——它只负责“声明继承”**。问题往往出在你误以为它会“主动查找”或“穿透变量”，而实际上它严格按 CSS 层叠规则走完一遍后，拿那个最终确定的 color 值。
color: inherit 是怎么拿到父级颜色的
它不回溯、不猜测、不跳过中间节点，只读取父元素当前已计算出的 color 值（computed value）。这个值可能是：
- 父元素自己写的
color: #3b82f6 - 父元素通过
color: inherit从爷爷那儿继承来的 - 父元素没设
color，但浏览器 UA 样式给了color: rgb(0, 0, 0)
只要父元素的 color 有确定的计算结果，inherit 就能拿到它。但它不会“绕过”父元素去查爷爷，也不会“解析”自定义属性或 currentColor 的源头。
哪些地方写了 inherit 也拿不到预期颜色
常见失效场景不是 inherit 失效，而是你忘了它生效的前提条件：
立即学习“前端免费学习笔记（深入）”；
-
button、input[type="button"]、select等表单控件有强 UA 样式，color默认被设为系统色（如ButtonText），直接覆盖了继承链 → 必须显式写color: inherit才能撬动 - 父元素的
color是var(--theme-color)，而子元素用color: inherit→ 拿到的是变量展开后的计算值（比如#1e40af），不是变量本身；后续改--theme-color，子元素不会响应 - 父元素用
color: currentColor，而currentColor又依赖于它自己的color→ 这种循环引用下，inherit拿到的是最终解出来的颜色，但你无法靠它“联动更新”
inherit 和 currentColor 在颜色同步上的关键区别
这是最容易混淆的一点：两者都“跟颜色有关”，但机制完全不同：
-
color: inherit是一个**继承指令**：告诉浏览器“请把父元素此刻算出来的color值给我” -
currentColor是一个**动态值关键词**：代表“我自己的color计算值”，哪怕这个值是继承来的，它也会随该元素color的变化实时刷新（例如 hover 改color，border-color: currentColor会立刻变） - 所以想让边框/图标/下划线“自动跟随文字颜色变化”，用
currentColor；想让按钮文字“强制和容器保持一致”，用color: inherit
容易被忽略的兼容与副作用
语法上 inherit 兼容 IE8+，但有两个隐蔽坑点必须手动兜底：
- 如果父元素
color来自currentColor（比如color: currentColor），子元素color: inherit拿到的是那个时刻的快照色值，不是活链接 → 后续父级color变了，子元素不会更新 - 在暗色模式切换、CSS 自定义属性批量更新等场景中，
inherit不触发重计算，它只在样式重新层叠时起作用 → 如果你依赖 JS 动态改--text-color并期望子元素响应，得配合color: var(--text-color)而不是靠继承
真正需要颜色同步的地方，别赌“它应该会继承”；该写 inherit 的地方就写，该换 var() 或 currentColor 的地方就换，别混用。
