color: inherit 是显式继承父元素计算后的 color 值，不回溯查找；对 button、a、select 等有默认颜色的元素必须使用才能覆盖内置样式；与 unset 不同，inherit 专用于继承且语义明确。
color: inherit 是什么行为
color: inherit 不是“自动取父级颜色值”，而是显式声明：**当前元素的 color 属性值，应等于其父元素计算后的 color 值**。它不关心父元素是否设置了 color，也不触发“回溯查找”；如果父元素的 color 本身是 inherit 或未设置（即由浏览器默认或用户代理样式决定），子元素也会继承那个最终计算值。
什么时候必须用 inherit 才能拿到父级颜色
某些元素天然有内置颜色，会覆盖继承链，此时不写 inherit 就拿不到父级颜色：
-
<button>、<input type="button">默认使用系统控件颜色（如灰色），即使父容器设了color: red，按钮文字仍不是红色 -
<a>标签默认有color: -webkit-link（或类似 UA 值），不重置就会忽略父级color -
<select>、<option>在部分浏览器中对color继承不敏感
解决方式就是主动写：
button, a, select { color: inherit; }
inherit 和 unset 的区别在哪
二者都可用于“恢复继承”，但语义和 fallback 行为不同：
立即学习“前端免费学习笔记（深入）”；
-
color: inherit→ 强制取父元素的color计算值（哪怕父是unset，也会继续向上找） -
color: unset→ 等价于“按属性默认行为走”：对继承属性（如color）等同于inherit；对非继承属性（如border）则等同于initial
所以当目标明确是“颜色随父变”，优先用 inherit，语义更直接，行为更可预测。
容易被忽略的兼容性和副作用
inherit 兼容所有现代浏览器（IE8+），但要注意两个隐蔽问题：
- 如果父元素
color是通过currentColor设置的（比如border-color: currentColor），子元素color: inherit拿到的是那个计算后的颜色值，不是变量本身 —— 无法动态响应父级currentColor的后续变化 - 在 CSS 自定义属性（
--my-color）场景下，inherit不会穿透变量，它只继承最终计算值。想让子元素“读取同一变量”，得用color: var(--my-color)，而不是依赖继承
真正需要“颜色跟随父级”的地方，别假设它默认发生；该写 color: inherit 的地方，一个都不能少。
