css变量局部覆盖仅发生在声明它的选择器及其后代中，需在容器元素（如.card）上统一声明同名变量，子元素通过var()继承；嵌套选择器不自动创建作用域，伪元素和@keyframes不继承父级变量，内联样式变量优先级最高。
局部变量覆盖只发生在声明它的选择器内部
CSS变量的“局部”不是靠嵌套结构自动生效的，而是靠在某个选择器里重新声明同名变量。比如你在 .card 里写 --color-bg: #1a1a1a，那只有这个 .card 元素及其后代（且未被更近的同名变量覆盖）才会读到这个值。
常见错误是以为写在 .card__header 里就能影响 .card__footer —— 实际上，.card__footer 并不自动继承 .card__header 的变量，它只看自己、父元素、祖先元素中谁最近声明了 --color-bg。
- 有效做法：在容器元素（如
.card）上统一声明变量，子元素直接用var(--color-bg) - 无效做法：在多个子选择器里分别声明同一变量，容易因权重或顺序导致覆盖混乱
- 调试技巧：选中目标元素 → DevTools 的 Computed 面板 → 搜索
--color-bg，点开箭头看具体哪一行生效
嵌套选择器本身不创建变量作用域
CSS 里没有“块级作用域”概念，.card { .header { color: var(--text); } } 这种写法（原生 CSS）根本不存在——那是预处理器（如 Sass/Less）的语法，编译后会变成 .card .header，变量查找仍按 DOM 树和声明顺序走，和嵌套层级无关。
真正起作用的是：你把变量声明在哪个 DOM 节点对应的选择器上。哪怕 HTML 是平铺的，只要你在 .theme-dark 这个类上写了 --color-bg，它就对所有后代生效；反过来，如果只在 button 标签选择器里声明，那只有 button 及其子元素能拿到新值。
- 别指望
&.active { --state-color: red; }自动让&.active span继承——它确实会，但前提是span没有更近的同名声明 - 伪元素（
::before）、@keyframes里的var()不继承父级变量，得靠外层容器类兜底 - 内联样式中的变量优先级最高，比如
style="--color-bg: #000"会压倒所有 CSS 中的同名声明
为什么 :root 不能用于局部覆盖
:root 永远只匹配文档根元素（html），在它里面改变量就是全局改。你想局部换色，却往 :root 里塞媒体查询或 JS 动态赋值，结果是整页变，不是某个区域变。
真正的局部覆盖必须放弃 :root，转而把变量声明在具体容器上。例如深色卡片区域：.card--dark { --color-bg: #121212; --color-text: #e0e0e0; }，然后确保卡片内部所有颜色都用 var(--color-bg)。
- 错误示范：
@media (prefers-color-scheme: dark) { :root { --color-bg: #121212; } }→ 全局生效，无法限定区域 - 正确路径：
@media (prefers-color-scheme: dark) { .card--dark { --color-bg: #121212; } } - 兼容性注意：IE 完全不支持
var()，会静默回退到初始值（非报错），必须准备 BEM 类名降级方案
变量覆盖失效的三个典型现场
你以为改了变量，但页面没反应？大概率掉进了这几个坑：
- 用了硬编码值：某处写死了
background: #fff，而不是background: var(--color-bg)，变量再怎么覆盖也触达不到 - 选择器权重干扰：父容器用
.theme-dark声明变量，子组件却用div.card（低权重）覆盖，结果被更高权重的全局规则压制 - 变量名拼写/连字符不一致：
--text-color和--textColor是两个变量，CSS 区分连字符，大小写不敏感但命名必须完全一致
最稳妥的验证方式：打开 DevTools，找一个明显没变的元素，检查它的 Computed 面板里 var(--xxx) 展开后显示的值和来源行号——值不对，说明变量没声明；来源不是你预期的位置，说明被别的规则覆盖了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
