color继承失效主因是源头未声明或中间层覆盖，需显式处理a标签伪类、表单控件默认样式、svg继承断链及inherit依赖计算值等场景。
color 继承失效，90% 不是继承机制坏了，而是你没管住“源头”或“中间层”。
为什么 a 标签不继承父元素的 color
浏览器给 a 标签预设了高优先级的伪类样式：a:link 默认蓝色、a:visited 默认紫色。这些规则会直接盖掉 color: inherit 的效果。
- 只写
a { color: inherit; }不够，必须显式覆盖所有状态：a:link, a:visited, a:hover, a:active { color: inherit; } - 如果父元素本身没声明
color（比如只靠 UA 样式或 reset.css 清掉了），那inherit就是继承一个initial值，看起来还是默认色 - 某些 UI 框架（如 Bootstrap）会把链接颜色写死在
.nav-link这类 class 里，比父级color选择器优先级高，得查 computed 面板确认最终来源
为什么 button 和 input 看起来不继承 color
这些表单控件的文本颜色由操作系统或浏览器 UA 样式控制，默认不走 CSS 继承链——哪怕 DOM 上是父子关系，渲染引擎也常绕过继承逻辑直接取系统值。
- 必须显式声明：
button, input { color: inherit; } - 部分浏览器（如旧版 Safari）对
input[type="number"]的箭头按钮颜色单独处理，color只影响输入框内文字，不影响控件本身 - 若用了
all: unset或appearance: none后没补color，会彻底丢失文本色
为什么 currentColor 在 svg 里不生效
currentColor 不是魔法，它依赖完整的 CSS 继承链。SVG 元素（尤其是作为独立块插入时）很容易断链。
-
svg元素自身没有默认color值，必须在其上或父容器上显式写color: #xxx，否则currentColor解析为initial - 常见断点：
button > svg中，button没设color；或svg内部硬编码了fill="#000"，覆盖了外部继承 - 用 DevTools 的 Computed 面板直接看
svg元素的color计算值——如果是rgba(0, 0, 0, 0)或initial，说明上游根本没传下来
为什么 inherit 写对了但子元素颜色还是不对
继承的是“声明值”，不是“最终渲染值”。父元素的 color 如果来自 var(--x)、currentColor 或未生效的选择器，子元素就拿不到有效值。
- 检查父元素 Styles 面板里是否有
color行；再切到 Computed 面板确认该值是否真实计算出来（非initial或transparent） - 父元素若设了
color: transparent，子元素color: inherit就真变透明，不是“失效” -
display: none的父元素下，整个子树不参与样式计算，inherit直接被跳过 - Shadow DOM 边界天然阻断继承，跨 shadow boundary 必须用
part或 CSS 自定义属性透传
最稳的继承方式不是赌 inherit，而是让父元素有明确 color 声明，子元素用 currentColor ——它取的是计算后的值，还能复用到 border-color、fill 等地方。但前提是，你得先确保那个“计算后”的值真存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
