color: initial取规范初始值canvas-text（非绝对黑色），color: unset等价于inherit（继承父元素声明值，如var(--primary)），链无声明时才fallback到initial。
color: initial 和 color: unset 在绝大多数页面中视觉表现相同（都是黑色或深灰色），但语义和行为完全不同——误用会导致主题色失效、CSS 变量无法传递、暗色模式适配断裂。
color: initial 永远取规范初始值 canvas-text
color: initial 不看父元素、不看变量、不看浏览器 UA 样式，只认 W3C 规范定义的 canvas-text。这个值在多数浏览器里渲染为黑色，但它不是 #000，也不是 rgb(0, 0, 0)，更不是你重置过的 color: var(--text)。
常见错误场景：
- 根元素设了
:root { --text: #1a1a1a; color: var(--text); }，子元素写color: initial→ 拿不到--text，直接跳到canvas-text - 暗色模式下
:root[data-theme="dark"] { --text: #e0e0e0; }，但color: initial仍走canvas-text，不会随主题变亮 -
button { color: initial; }后按钮文字变成不可预测的“系统默认黑”，可能与背景色冲突（比如深灰背景上显示深灰字）
color: unset 等价于 inherit（因为 color 可继承）
color 是可继承属性，所以 color: unset 的实际行为就是 color: inherit：它会沿着 DOM 树向上查找，拿到**父元素声明的 color 值本身**，包括 var(--primary)、rgba(0,0,0,0.8) 这类未计算的原始声明。
这意味着：
- 如果父元素是
color: var(--accent)，子元素color: unset就真传var(--accent)，后续变量更新时自动响应 - 父元素没设
color，整条继承链为空，则 fallback 到initial（此时才表现为canvas-text） - 它天然兼容 CSS 自定义属性链和媒体查询切换，比
initial更适合组件封装
为什么 button 或 SVG 里常踩坑
很多 UI 库默认给 button 或 svg 设了固定颜色，开发者想“清空”时习惯写 color: initial，结果反而切断了主题继承。
正确做法取决于目标：
- 想让图标文字色跟随宿主文字（比如按钮内
svg随按钮文字变色）→ 用fill: currentColor或color: unset - 想彻底剥离所有颜色影响、回归浏览器最原始渲染 → 才考虑
color: initial，但要意识到它不响应任何外部样式控制 - 用
all: initial或all: unset时，color行为差异会被放大：all: initial强制所有属性回initial；all: unset则对color是继承，对border是清空（none）
真正容易被忽略的是：你看到的“黑色”，可能来自 initial，也可能来自 unset fallback，还可能是浏览器 UA 样式表的 color: -webkit-link。不查 computed style，根本分不清到底哪条链在起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
