color 属性会继承，但仅继承已计算的显式值，不继承 CSS 变量、currentColor 推导值或 rgba() 等间接定义的颜色；currentColor 是动态引用父级已计算 color 的特例，用于 border-color、fill 等支持属性。
color 属性真的会继承吗
会，但只继承显式设置的 color 值，不会继承计算后的颜色（比如从 currentColor 推导出的值），更不会继承通过 rgba() 或变量间接定义的颜色——除非父元素本身把那个值“落地”成了实际颜色。
常见错误现象：div 里嵌套 span，父级用 color: var(--text-primary)，子元素没写 color，结果文字却是默认黑色。不是继承失效，而是 CSS 变量没被计算出来，继承链在变量求值前就断了。
- 继承只发生在「已计算」的属性值上，
color是少数几个原生支持继承的属性之一 -
currentColor是特例：它本身不继承，但它在子元素中求值时，会取父元素当前已计算的color值 - 如果父元素
color是inherit或unset，子元素不会继续往上找，而是按初始值（black）处理
font-color 和 color 有什么区别
没有 font-color 这个 CSS 属性，写了等于白写，浏览器直接忽略。这是初学者搜错文档或 IDE 自动补全误导导致的典型错误。
使用场景：你在写内联样式或调试时手快敲成 font-color，DevTools 里看不到该声明，控制台也不报错，但颜色就是不生效——因为压根没被识别。
立即学习“前端免费学习笔记（深入）”；
- 唯一合法的颜色文本属性是
color -
font相关属性里，font-size、font-weight都存在，但font-color从未进入任何标准 - 某些旧版 IE 的私有滤镜曾用过类似命名，但早已废弃，现代环境完全无效
为什么子元素加了 color 却看起来没变
大概率是选择器优先级更高，或者有其他规则覆盖了你的声明。CSS 继承不是“强制下发”，而是“兜底 fallback”——只要子元素自己设了 color，哪怕值是 initial 或 transparent，就不会去继承父级。
常见错误现象：给按钮加了 color: red，里面图标还是灰色；检查发现图标是 svg，其 fill 没有继承 color，除非你显式写 fill: currentColor。
-
color只影响文本和currentcolor引用处，不影响border-color、background-color、fill等属性 - 伪元素如
::before默认继承父级color，但如果它自身设置了color，就会切断继承 - 使用
!important覆盖时，注意它会影响整条继承链的可信度判断，慎用
currentColor 在哪些地方能真正起作用
currentColor 不是语法糖，它是实时绑定父级 color 计算值的动态引用，只在明确支持它的属性里生效，比如 border-color、fill、stroke、outline-color，但不能用在 background 渐变色停止点或 box-shadow 的模糊半径里。
性能影响很小，但兼容性要注意：IE9+ 支持，但早期安卓 WebView 对 currentColor 在 filter 或 SVG 内联样式中支持不稳定。
- 在 SVG 中写
fill="currentColor"是让图标随文本颜色自动变色的最简方案 -
border: 1px solid currentColor比写死#333更利于主题切换 - 不要在
@keyframes动画关键帧里依赖currentColor的变化，动画运行期间它不会响应父级颜色更新
