currentcolor 是实时求值的关键字，始终等于元素当前计算出的 color 值；其值由层叠规则决定，唯一控制方式是修改 color 属性本身。
currentColor 本身不能被“覆盖”，因为它不是一条可被层叠的样式声明，而是一个**实时求值的关键字**——它永远等于该元素当前计算出的 color 值。所谓“无法覆盖”，其实是误解了它的行为逻辑：你真正能控制的，只有 color 属性本身。
currentColor 的值从哪来？不是继承，是计算结果
currentColor 不读父元素的 color，也不管你写了没写 inherit；它只看本元素最终生效的 color 计算值。这个值由 CSS 层叠规则决定，可能来自：
- 元素自身显式设置的
color: #3b82f6 - 从父级继承而来（前提是本元素没重写
color） - 浏览器默认值（如
rgb(0, 0, 0)），当整条继承链都未定义color时触发
所以，改 currentColor 的唯一方式，是改它所依赖的 color —— 比如加一条 .btn { color: red; }，所有用到 currentColor 的 border-color、fill 就自动变红。
为什么加了 color: blue 却没生效？检查选择器权重和重置行为
常见现象：给按钮设了 color: blue，但图标还是灰色。问题往往不在 currentColor，而在 color 本身被更高优先级规则覆盖了。典型场景包括：
-
button元素有 UA 样式（如 Chrome 默认color: -internal-light-dark(black, white)），可能压过你的类选择器 - 伪类如
:hover或:focus里重写了color，但没同步更新其他状态 - 用了
all: unset或color: inherit后又没兜底，导致color回退为initial（即透明或不可见）
用 DevTools 的 Computed 面板直接查目标元素的 color 值，比猜更可靠。
SVG 中 currentColor 失效？90% 是 color 继承链断了
内联 SVG 里写 fill: currentColor 却不随文字变色，通常不是语法错，而是 color 没传下来。关键检查点：
-
<svg></svg>父容器是否真的拥有可计算的color？比如<button></button>默认无明确color，需手动加color: inherit - SVG 内部是否硬编码了
fill="#000"？这会直接覆盖 CSS 控制 - 是否用了
display: contents或all: revert类样式，清除了继承能力 - iOS Safari ≤15.6 下，
<svg></svg>缺少font-size会导致currentColor退为黑色 —— 加font-size: 16px即可修复
别在 SVG 文件里埋死色，也别指望 currentColor 自动穿透所有嵌套层级；它只认紧贴自己的那个 color 计算结果。
想用 CSS 变量替代 currentColor？方向反了
以下写法无效且会被浏览器忽略：
:root { --main-color: currentColor; }
因为 currentColor 是运行时关键字，不能赋值给自定义属性。正确路径是反过来：
- 用
--primary控制color：.theme { color: var(--primary); } - 让
currentColor自动读取它：.icon { fill: currentColor; }
这样改一个变量，所有依赖 currentColor 的地方就同步更新。强行把 currentColor 当变量存，只会掉进“值不存在”的坑里。
最常被忽略的一点：currentColor 不是颜色“代理”，它是颜色“镜像”——镜子里照不出没点亮的灯。每次它没反应，先确认灯（color）有没有亮，而不是调镜子角度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
