color: inherit 强制继承父元素声明的 color 值（如 var(--primary) 或 rgba(0,0,0,0.6)），而非计算结果；color: initial 取规范初始值 canvas-text（非绝对黑色）；color: unset 等价于 inherit，但继承链全无声明时 fallback 到 initial。
color: initial 不是“恢复成黑色”，而是取 CSS 规范定义的初始值 canvas-text（通常渲染为黑色，但不保证）；color: inherit 强制从继承链上找最近一个设置了 color 的祖先，拿它的声明值（比如 color: var(--primary) 就真传变量名）；color: unset 等价于 inherit，因为 color 是可继承属性——但它不会 fallback 到 initial，除非整条继承链都没设过 color。
color: inherit 拿的是“声明值”，不是“计算值”
它不关心父元素最终渲染出什么颜色，只认父元素写在样式表里的那行代码。比如：
.parent { color: rgba(0, 0, 0, 0.6); }
.child { color: inherit; }
结果是子元素拿到 rgba(0, 0, 0, 0.6)，不是深灰色的计算结果；再比如：
:root { --text: #222; }
.parent { color: var(--text); }
.child { color: inherit; }
子元素实际继承的是 var(--text) 这个字符串，不是展开后的 #222。常见翻车点：
立即学习“前端免费学习笔记（深入）”；
- SVG 图标用
fill: inherit，结果没变色——因为父元素的color来自更上层，中间某层被重置了 - 伪元素
::before { color: inherit }继承的是宿主元素的color，不是宿主的父容器 - IE8+ 支持，IE7 及更早不支持
color: initial 回退到规范初始值，不是浏览器默认色
CSS 规范里 color 的初始值是 canvas-text，它由用户代理决定，大多数浏览器渲染为黑色，但不是绝对。这意味着：
- 它无视你全局写的
body { color: #333 }，也无视 UA 样式表里给p设的默认色 - 它不会还原成你 DevTools 里看到的“Computed”面板里的当前色值
- 在高对比度模式或某些辅助技术下，
canvas-text可能映射为其他颜色，initial会随之变化
所以别指望 color: initial 能“一键清空并回退到页面默认文字色”——那是 revert 的事。
color: unset 实际就是 color: inherit，但有 fallback
因为 color 在 MDN 上明确标记为 Inherited: yes，所以 unset 直接走继承逻辑。但它和纯 inherit 有个关键区别：
- 如果整条继承链（从父元素一路向上到
html）都没显式设置过color，unset才会 fallback 到initial（即canvas-text） - 而
inherit在这种情况下，会继续 fallback 到浏览器 UA 样式（比如body的color），不一定走到initial - 它对自定义属性也生效：
color: var(--text, unset)中的unset含义相同——先尝试继承，无则用初始值
真正容易被忽略的是：当你在组件中写 all: unset，color 确实会继承，但同时 display、font-size、line-height 全部被重置，其中 font-size: initial 是 medium（≈16px），可能跟设计稿偏差明显。
