css变量不继承，仅通过级联传播；其作用域由最近声明祖先决定，受all: unset、display: none、选择器未匹配、大小写/unicode错误、shadow dom隔离等因素影响而失效。
自定义属性（CSS变量）本身不参与继承机制
这是最根本的原因：--my-color 这类自定义属性默认不继承，哪怕父元素写了 color: var(--my-color)，子元素也不会自动拿到 --my-color 的值。CSS 变量的“传播”靠的是级联（cascading），不是继承（inheriting）。也就是说，子元素必须自己声明 var(--my-color)，且该变量在它的**计算作用域内有定义**——这个作用域由最近的、包含该变量声明的祖先元素决定。
常见误操作是以为写个 * { --my-color: red; } 就万事大吉，但其实：如果某个中间容器用了 all: unset 或 all: initial，它会清空所有自定义属性声明，导致子树无法访问该变量；同理，display: none 的父元素下，其子元素不参与样式计算，变量也就不可见。
选择器没匹配到变量声明的作用域节点
自定义属性只在声明它的元素及其后代中可用，但**声明位置必须被选择器实际命中**。比如你写了：
.theme-dark {
--text-primary: #e0e0e0;
}
但 HTML 中是 <div class="theme-light"><p>文本</p></div>，那 --text-primary 根本没声明，var(--text-primary) 就解析为 invalid，最终回退到属性的初始值（如 color 回退到 inherit 或 initial）。
实操建议：
- 用 DevTools 的 Computed 面板点开目标元素，搜索
--xxx，看变量是否显示为有效值；无效时会标为invalid或直接不出现 - 检查变量声明所在的 class 是否真正在 DOM 上；不要依赖 JS 动态加 class 后忘记触发重绘（如未修改
style或未触发布局） - 避免在
@media或@supports块里声明变量后，又在外部直接引用——它只在块内有效
拼写错误或大小写不一致导致变量查不到
CSS 变量名严格区分大小写：--Color 和 --color 是两个不同变量。一旦声明和引用不一致，var(--Color) 在只有 --color: red 的环境下就取不到值。
更隐蔽的是 Unicode 零宽字符或全角空格混入变量名——复制粘贴时容易带进来，肉眼难辨。例如 --spacing-1（末尾有零宽连接符）和 --spacing-1 完全不等价。
实操建议：
- 统一用小写字母 + 短横线命名，如
--font-size-sm，杜绝驼峰和下划线 - 在 Styles 面板里右键变量名 → “Reveal in Sidebar”，确认声明源是否真实存在
- 用正则全局搜索
--[\w-]+，核对所有声明与引用是否一一对应
使用 inherit 关键字对自定义属性无效
有人试图写 color: inherit 期望继承父元素的 --main-color，这是错的。inherit 只能继承**标准 CSS 属性**的计算值，不能继承变量本身。变量要“传递”，必须靠 var(--x) 显式调用，且该变量在当前作用域已定义。
真正起作用的是变量作用域链，不是 DOM 继承链。一个常见陷阱是 Shadow DOM：宿主元素上声明的 --x 默认不会穿透到 shadow root 内部，除非显式用 :host { --x: ... } 或通过 part / exportparts 暴露。
复杂点在于，变量值可能依赖其他变量（如 --bg: var(--primary);），一旦上游变量失效，整条链就断了——这种间接失效很难一眼看出，必须逐层检查 Computed 面板里的每个 var() 解析结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
