currentcolor才是上下文感知的正确载体，它动态引用自身color计算值，支持多层传递和联动更新；而color: inherit仅静态继承父元素已计算的颜色，不响应变量变化、易被ua样式覆盖、无法跨shadow dom边界。
color: inherit 本身不能解决组件复用中的颜色同步问题，它只是继承指令，不是响应式桥梁。真正能支撑上下文感知、跨层级自动同步的，是 currentColor。
为什么color: inherit在组件里经常“失联”
它只读取父元素当前已计算出的 color 值，不穿透变量、不响应变化、不绕过 UA 样式：
- 父元素写的是
color: var(--theme-color)，子元素color: inherit拿到的是展开后的#1e40af，后续改变量，子元素颜色不动 -
button、a:link等有强默认样式，不显式覆盖所有伪类（a:link, a:hover），inherit就被压住 - 父元素没显式声明
color（比如只靠浏览器默认黑色），inherit实际继承的是initial或未定义值，结果不可控
currentColor 才是上下文感知的正确载体
它不是继承，而是动态引用“我自己的 color 计算值”，天然支持多层传递和联动更新：
- 父元素设
color: #3b82f6，子元素用border-color: currentColor，边框立刻变蓝 - 父元素改用
color: var(--primary)，只要变量生效，所有currentColor引用自动刷新 - SVG 内联图标写
fill: currentColor，图标颜色随文字实时同步，无需 JS 干预 - 支持
box-shadow: 0 1px 2px currentColor、text-shadow: 0 1px 1px currentColor，阴影也跟着主题走
表单控件和链接必须手动“打通”继承链
浏览器对 input、select、a 的 UA 样式优先级高，inherit 不写全就失效：
- 别只写
a { color: inherit; }，要补全：a:link, a:visited, a:hover, a:active { color: inherit; } -
button, input[type="button"], select都需单独加color: inherit，否则系统色霸屏 - 若用
currentColor，同样要确保宿主元素（如.card）显式设置了color，否则currentColor取到的是 UA 默认值
Shadow DOM 和自定义属性场景下，inherit 彻底失效
它无法跨 shadow boundary；currentColor 可以，但依赖宿主显式设置：
- Web Component 中，
:host { color: var(--theme-color); }是前提 - 内部
::slotted(*) { color: currentColor; }才能将颜色透传给插槽内容 -
--my-color: inherit是非法写法，CSS 自定义属性不接受关键字作为值
真正需要“子随父变”的地方，不要指望 inherit 自动兜底——它只在父元素明确设了可计算 color 且无 UA 干扰时才可靠；currentColor 是更健壮的选择，但得记住：它取的是“自身 color”，不是“父级 color”，所以宿主的 color 声明一步都不能少。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
