子元素 var(--color) 报错或没生效的本质原因只有两个：父元素未定义 --color 且无 fallback，或中间某层设了 --color: initial/ unset 切断传递链；变量名大小写不一致也会导致失败。
CSS 自定义属性（即 --xxx 变量）默认可继承，但继承的是“定义”，不是“计算结果”；子元素只要没重定义同名变量，就能用 var(--xxx) 拿到父级传下来的值。
为什么子元素 var(--color) 报错或没生效？
常见现象是控制台没报错，但颜色没变，或者 fallback 值被用了。本质原因只有两个：
- 父元素根本没定义
--color，而子元素又没提供var(--color, #000)中的 fallback - 中间某层祖先显式设了
--color: initial或--color: unset，切断了向下的传递链 - 变量名大小写不一致，比如父设
--TextColor，子写var(--textcolor)—— CSS 变量区分大小写
unset 和 initial 在变量覆盖时的区别
二者都可用于“清空”变量，但行为不同：
-
--gap: unset：让该变量恢复为“未定义”状态；子元素调用var(--gap, 8px)时会取8px -
--gap: initial：把变量值设为 CSS 初始值（即unset的初始语义），等效于彻底删除该变量声明，效果和unset相近，但更彻底 - 注意：
inherit对自定义属性无效 —— 它只对原生 CSS 属性起作用，不能用来“强制继承”某个--xxx
如何让某个子元素“跳过”父级变量、用自己的一套？
不需要 hack，直接在子元素上重新声明同名变量即可，CSS 层叠规则天然支持：
.theme-dark { --bg: #111; --text: #eee; }
.card { --bg: #fff; --text: #333; } /* 覆盖，无需 !important */
.card p { background-color: var(--bg); color: var(--text); } /* 拿到的是 #fff / #333 */
- 变量覆盖不依赖选择器权重，只要声明位置在后（或更靠近元素），就生效
- 内联样式中写
style="--bg: #f0f0f0"优先级最高，会盖掉所有外部定义 - 如果用 JS 动态改，
el.style.setProperty('--bg', '#f0f0f0')效果同内联，且可随时撤销（设为空字符串）
真正容易被忽略的点是：变量继承只看“有没有定义”，不看“定义在哪一层”。哪怕隔了五层 DOM，只要中间没人重写或 unset，子元素就能拿到最顶层的 --xxx。调试时别只盯父元素，得顺着祖先链逐层检查变量是否存在、是否被意外重置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
