CSS变量局部覆盖本质是继承链上的就近声明，非赋值覆盖；:root仅匹配html元素，其他选择器内写:root无效，子元素取值取决于DOM树中最近的有效祖先声明。
局部变量不能“覆盖”全局 :root 变量，只能在其作用域内重新声明同名变量，让后代元素就近读取——这是继承链决定的，不是赋值覆盖。
为什么 :root 里的变量不能被“覆盖”
因为 :root 是伪类，只匹配 <html> 元素。你在其他选择器里写 :root { --color: red } 完全无效，浏览器直接忽略。所谓“覆盖”，其实是子元素从父级继承时，取离它最近的有效声明值。
-
:root { --color: blue }→ 整个页面默认值 -
.card { --color: green }→ 所有.card及其后代（如.card p）读到的是green，不是blue -
.card .btn { --color: red }→ 更近一层，.btn及其内部用var(--color)就取red
var(--x, fallback) 的 fallback 不是“兜底变量”，而是字面值或 CSS 关键字
fallback 参数不支持嵌套 var()，也不能引用另一个变量名。写成 var(--x, var(--y)) 会直接失效，Safari 旧版甚至报错或回退为空。
- ✅ 正确：
color: var(--text-color, #333) - ❌ 错误：
color: var(--text-color, var(--fallback-color)) - ⚠️ 注意：fallback 必须是可解析的 CSS 值，比如
transparent、1em、bold，不能是未定义变量
如何让局部变量真正生效：声明位置必须在祖先链上
变量要被子元素读取，声明它的选择器必须是该子元素的**祖先元素**（不一定是直接父级，但必须在 DOM 树路径上）。如果页眉不在 body#page-about 内部，那 body#page-about { --header-bg: #2c3e50 } 就对它完全无效。
立即学习“前端免费学习笔记（深入）”；
- ✅ 有效结构：
<body id="page-about"><header></header></body> - ❌ 无效结构：
<body id="page-about"></body><header></header>（header是兄弟节点，不继承） - ⚠️ 常见疏漏：用 JS 动态插入的组件可能脱离原始容器，导致变量继承断裂
动态改变量时，document.documentElement.style.setProperty 改的是全局
调用 document.documentElement.style.setProperty('--color', 'red') 等价于修改 :root 下的变量，影响整个页面。想局部更新，得把变量设在具体容器上：
const card = document.querySelector('.card');
card.style.setProperty('--color', 'red');
- 这样只影响
.card及其后代，不影响其他区域 - 如果容器是动态生成的，记得在插入 DOM 后再 setProperty，否则样式不触发重绘
- 批量操作建议用
CSSStyleSheet.insertRule注入新规则，避免频繁 style 操作
最易被忽略的一点：CSS 变量的“局部性”完全依赖 DOM 层级和继承链，和 SCSS 的 $var 编译期作用域毫无关系；混淆这两者，是 80% 主题切换失败的根源。
