子元素未声明变量却用“错”值，是因为变量继承依据最近祖先声明而非dom深度或css顺序；伪元素和@keyframes不继承父变量；内联变量优先级最高；sass嵌套不等于css作用域。
为什么子元素没声明变量却用了“错”的值？
这不是继承出错，而是你误判了“谁是最近祖先”。--color-bg 的值由离目标元素**最近且声明了该变量的选择器**决定，不是由 DOM 嵌套深度或 CSS 书写顺序决定。比如：.card 声明了 --color-bg: #1a1a1a，但中间有个 .theme-light 也声明了同名变量，哪怕它在 HTML 里只是个空 div，只要它在 DOM 树上更靠近目标元素，它的值就会生效。
常见错误现象：
- 调试时在 DevTools 的 Computed 面板看到
--color-bg显示为某个意外颜色，点开箭头却发现生效行来自一个完全没注意的父级 class - 组件局部换肤失败，因为外层框架提前注入了
:root或body级变量，压倒了组件容器自己的声明
伪元素和 @keyframes 里 var() 为啥不继承？
::before、::after 和 @keyframes 中的 var(--x) 不走常规继承链，它们只认自己所在作用域的变量声明——而伪元素没有 DOM 节点，@keyframes 是独立作用域，两者都不从父元素“拿”变量。
实际影响：
- 写
.btn::before { background-color: var(--btn-bg); }时，如果.btn上没声明--btn-bg，它不会向上找，而是回退到:root或初始值 - 动画中用变量控制颜色渐变，必须确保变量已在触发动画的元素（如
.animating）上显式声明，不能指望父容器“传下来”
内联 style="--x: y" 为什么总赢？
内联样式中的自定义属性具有最高层叠优先级，它会覆盖所有 CSS 文件中同名变量的声明，无论选择器特异性多高、位置多靠后。
这容易被忽略的点：
- React/Vue 组件里用
style={{ '--color': themeColor }}动态注入变量，会静默压制所有外部主题类（如.theme-dark）的声明 - 服务端渲染时注入的
style属性，可能比后续加载的 CSS 更早生效，导致主题切换失效 - 调试时 Computed 面板里能看到变量值来自
element.style，但容易漏看这一行，误以为是 CSS 规则冲突
嵌套写法（Sass/Less）和原生 CSS 变量作用域根本不是一回事
写 .card { --color: red; .header { color: var(--color); } } 看似“块级作用域”，但这是预处理器语法；编译后变成 .card .header，变量查找仍按 DOM 树走——.header 读的是它自身、父 .card、祖先中**最近声明**的 --color，不是“这个 Sass 块里定义的”。
真正可控的做法：
- 把变量统一声明在容器元素上（如
.card { --color-bg: #1a1a1a; }），子元素只用var(--color-bg) - 避免在多个子选择器里重复声明同一变量（如
.card__header { --color-bg: ...; }+.card__footer { --color-bg: ...; }），权重和顺序极易失控 - 用
data-theme属性配合属性选择器（如[data-theme="dark"] { --color-bg: #000; }）替代深层嵌套声明，更易追踪
最常被绕过的环节是：没打开 DevTools 的 Computed 面板直接搜 --your-var-name，然后点开箭头看清楚哪一行真正生效——变量覆盖不是玄学，只是 DOM 树 + 声明位置 + 内联优先级三者叠加的结果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
