CSS变量覆盖链路是沿DOM父链向上查找最近有效声明的线性过程，而非自动继承树；修改.card--dark未影响.card__footer，是因为变量未声明在二者共同祖先（如.card）上。
CSS 变量覆盖链路不是“自动继承”的树状结构，而是按 DOM 节点上最近的有效声明逐级向上查找的线性过程——Chrome 139 的 Computed 面板已强化该路径可视化，但必须手动触发才能看到完整链条。
为什么修改了 .card--dark 却没影响 .card__footer？
根本原因不是选择器没嵌套，而是变量声明没落在正确的祖先节点上。Chrome 139 不会帮你“推断作用域”，它只忠实执行 CSS 自定义属性规范：从目标元素自身开始，沿父链向上找第一个设置了 --color-bg 的选择器，找到即停，不继续往上。
- 常见错误：在
.card__header里写--color-bg: #121212，以为.card__footer会“顺带”拿到——实际不会，除非.card__footer自己或它的某个父节点（比如.card）也声明了同名变量 - 正确做法：把变量统一声明在容器级选择器上，例如
.card { --color-bg: #fff; }和.card--dark { --color-bg: #121212; }，确保所有子元素都共享同一作用域根 - 内联样式优先级最高：
<div style="--color-bg: red">会直接中断查找链，跳过所有 CSS 中的声明
用 Computed 面板查清 --color-bg 到底从哪来
Chrome 139 的 Computed 面板对变量来源做了显式标注，但默认只显示最终值。要看到完整覆盖链，得主动展开：
- 选中目标元素（如
.card__footer），切到 Computed 面板 - 在搜索框输入
--color-bg，点击右侧出现的箭头图标（不是放大镜） - 展开后能看到类似这样的路径：
element.style → .card--dark → :root，每一项都标有文件名和行号，点击可跳转 - 如果某一级显示
(inherited)却没链接，说明该声明来自父元素的 CSS 规则，而非当前元素自身
:root 声明会污染全局，别把它当局部开关用
在 :root 里动态改变量（比如 JS 执行 document.documentElement.style.setProperty('--color-bg', 'red')）会导致整页重绘，且无法被容器类隔离——这是 Chrome 139 里最常被误用的“伪局部覆盖”。
立即学习“前端免费学习笔记（深入）”；
- 真正可控的局部覆盖，必须放弃
:root，改用语义化容器类，例如.theme-light、.theme-dark、.mode-compact - 伪元素
::before/::after和@keyframes内部的var(--x)不继承父元素变量，必须靠外层容器类兜底，否则 fallback 值生效 - 媒体查询中写
@media (prefers-color-scheme: dark) { :root { --c: #000; } }是全局切换，不是组件级响应
Overrides 功能不能直接编辑变量声明链
Chrome 139 的 Overrides 支持持久化保存你对 CSS 文件的修改，但它不提供“变量依赖图”或“一键跳转声明源头”功能。你改的是文本，不是抽象语法树。
- 想验证变量覆盖是否生效，不要只看 Elements → Styles 里某条规则是否划掉——那只是权重覆盖，和变量无关
- 必须配合 Computed 面板确认最终值来源；若发现值不对，再回到 Sources 面板，按 Computed 提供的路径去定位并编辑对应 CSS 文件
- Overrides 对
style标签和内联style属性无效，只处理外部 CSS 文件和<style>块中的声明
变量覆盖链路本身没有“复杂逻辑”，但人容易高估浏览器的智能程度——它不会猜你想覆盖哪里，只认 DOM 节点上明确写出的声明。Chrome 139 把这条链路暴露得更直白了，但也要求你更严格地组织声明位置。
