CSS局部变量作用域由DOM结构天然截断，仅影响声明元素及其后代，通过就近查找生效，不会修改全局变量，而是遮蔽继承路径。
修改 CSS 局部变量不会影响全局样式，是因为它的作用域天然被 DOM 结构截断——浏览器查找 var(--x) 时，只沿祖先链向上找**最近一次有效声明**，而不是“覆盖”或“修改”某个全局值。
局部变量声明只在当前元素及其后代生效
CSS 变量的继承机制不是“赋值覆盖”，而是“就近查找”。你在 .card 里写：
.card { --bg-color: #2d2d2d; }这个声明只对 .card 自身和它内部所有子元素（如 .card__header、.card span）可见；.header、.nav 这些同级或父级元素完全读不到它。
常见错误现象：
– 在 button:hover 里声明 --text-color，结果 button span 没变色 → 因为 hover 状态不触发继承，span 查找时跳过该声明
– 把变量写在 :root .theme-dark 这类复合选择器里 → 浏览器只认 :root，后面类名无效，变量根本没注册
局部变量无法“污染”全局，但可能被误认为“失效”
局部变量不会改写 :root 中的同名变量，但它会遮蔽（shadow）其继承路径。只要子元素没显式 fallback，就只会拿到局部值；一旦删掉局部声明，它会自动回退到上层（比如 :root）定义的值——不是“恢复”，而是重新开始查找。
立即学习“前端免费学习笔记（深入）”；
- 安全写法：
color: var(--text-color, #333);—— fallback 必须是合法 CSS 值，且不能是另一个var() - 危险操作：
color: var(--text-color, var(--fallback));→ 浏览器当字面量渲染，文字直接消失 - 调试重点：DevTools 的 Computed 面板里点开
--text-color，看“来源”是不是你预期的那个选择器
和 SCSS / Less 变量的根本区别在这里
很多人混淆“CSS 变量”和“预处理器变量”。$color（SCSS）或 @color（Less）在编译阶段就被替换成具体值，不存在运行时作用域；而 --color 是真实存在于 CSSOM 中的属性，它的值取决于**当前元素在 DOM 中的位置与祖先声明**。
这意味着：
– 你不能用 JS 改 document.querySelector('.card').style.setProperty('--bg-color', 'red') 来影响 :root 的值
– 但你可以用 document.documentElement.style.setProperty('--bg-color', 'red') 影响所有未被局部遮蔽的地方
– 同一个变量名，在不同组件内可以安全地“各用各的”，互不干扰
真正容易被忽略的是：局部变量的安全性不来自语法限制，而来自浏览器对继承链的严格截断——它不依赖开发者自觉，也不怕手抖多写一个 !important，只要 DOM 结构不变，作用域边界就不会漂移。
