CSS变量局部覆盖的本质是在目标容器上重声明同名变量，使子元素按继承链就近读取最近声明值；:root仅匹配html根元素，button内写:root无效，必须直接在button或其父级声明变量。
CSS变量局部覆盖的本质是作用域重声明，不是“覆盖全局变量”，而是让子元素读取时自动取最近的有效声明。
为什么:root里的变量不能在button里用:root { --color: red }覆盖
因为:root永远只匹配文档根元素（html），在button选择器里写:root { --color: red }完全无效——浏览器根本不会解析它。真正起效的是直接在目标元素或其父容器上设置同名属性：
-
button { --color: red; }→ 该button及其内部所有用var(--color)的地方都取red -
.card { --color: blue; } .card button { --color: green; }→ 按照继承链，button内取green，不是blue，更不是:root的初始值 - 权重不参与变量查找：即使
.card button选择器权重远低于body，只要它声明了--color，就优先于body里声明的同名变量
var(--x)读取时到底找哪个值：继承链 + 声明位置
CSS变量按CSS继承机制向下传递，但“就近原则”只看DOM树上的祖先是否声明过该变量，不看选择器权重或源顺序：
- 如果
div.card写了--bg: #222，而它内部的span没声明--bg，那么span读var(--bg)拿到的就是#222 - 但如果
span自己写了--bg: #444，哪怕只是span { --bg: #444; }，它和它的伪元素（如::before）都会用#444 -
@keyframes里不能声明变量，也不能读取父级变量——动画块是独立作用域，必须靠外层类兜底，比如给动画容器加.theme-dark类并提前设好变量
调试时怎么确认变量到底被谁覆盖了
打开浏览器DevTools，选中目标元素，在Computed面板里搜--开头的变量名，点开右侧小箭头就能看到：
立即学习“前端免费学习笔记（深入）”；
- 生效的值来自哪一行CSS（含文件名和行号）
- 是否被更高层祖先覆盖（显示“inherited from
div.card”之类） - 如果显示
invalid或空值，大概率是拼写错误、未声明、或IE等不支持环境下的静默失效 - 注意：某些框架（如Vue scoped）会动态加属性选择器，可能干扰继承路径，此时要检查实际渲染后的DOM结构
IE兼容场景下别碰var()，换思路
IE11及以下完全不支持自定义属性，var(--color)会直接回退到属性默认值（比如color变成inherit），且不报错、无提示。真要兼容：
- 放弃变量方案，改用BEM类名切换：
.theme-dark .btn和.theme-light .btn分别写死颜色 - 用
<style>标签配合高特异性选择器临时覆盖，但得确保它在全局样式之后加载 - 服务端根据UA判断是否注入变量方案，对IE返回降级CSS
变量局部覆盖看着简单，但真正卡住人的往往是继承链误判和调试盲区——别信“写了就生效”，一定要在DevTools里点开Computed看真实来源。
