子元素写--color: red能覆盖父级，是因为css变量继承查找最近声明节点，而非修改原值；浏览器从子元素自身向上遍历dom，首个定义--color的节点（含自身）的值即被采用，与选择器权重和文件顺序无关。
直接在目标容器上重新声明同名变量，子元素会自动按继承链取最近定义的值；:root 不能用于局部覆盖，它只影响全局。
为什么在子元素里写 --color: red 就能覆盖父级？
CSS变量的“覆盖”不是修改旧值，而是让继承查找停在更近的祖先节点。浏览器读取 var(--color) 时，会从当前元素自身开始向上遍历 DOM，找第一个定义了 --color 的祖先（含自己），然后用那个值。
- 如果
.card声明了--color: blue，而它的子元素.card__button也写了--color: red，那么.card__button内部所有var(--color)都取red - 这个过程不依赖选择器权重，也不看 CSS 文件加载顺序，只看 DOM 节点上是否实际声明了该变量
- 伪元素（如
::before）会继承宿主元素的变量，但@keyframes和 Shadow DOM 内部不会自动继承，得手动传或兜底
怎样避免变量被意外切断继承？
unset 和 initial 是常见“断点”，它们会让变量变成“无值”状态，导致后续 var(--x, #000) 的 fallback 生效，而不是继续向上找。
- 写
--color: unset在中间某层，子孙调用var(--color, #333)就会拿到#333，而不是更上层定义的值 -
inherit对自定义属性无效——别写--color: inherit，它不会起作用 - 检查 DevTools 的 Computed 面板，搜索变量名，点开箭头看 “Defined in” 是哪一行，能快速定位是不是被
unset或拼写错误截断了
多主题嵌套时，怎么防止变量互相污染？
靠 class 作用域隔离，而不是靠变量名加前缀。每个主题类应独立声明完整变量集，并确保组件根元素同时携带主题类和结构类。
- 错误做法：
:root { --bg: #fff; }+.theme-dark { --bg: #121212; }→ 后者不生效，因为.theme-dark没匹配到根元素 - 正确做法：
.theme-dark { --bg: #121212; --text: #e0e0e0; }，然后 HTML 中写<div class="card theme-dark"> <li>如果组件是 Web Component，Shadow DOM 外的变量进不去，必须用 JS 动态设在宿主元素上：<code>hostEl.style.setProperty('--bg', '#121212')
真正容易被忽略的是：变量继承的是“声明动作”本身，不是计算结果。比如父元素设 --size: 2em，子元素用 font-size: var(--size)，这个 2em 始终相对于父元素的 font-size 解析，不是子元素自己的。调试时看到数值“不对”，大概率是这个动态绑定在起作用，而不是变量没传过去。
