CSS自定义属性继承发生在样式计算的继承环节，而非层叠环节；浏览器先收集声明，再将祖先已解析的值继承给子元素，最后求值var()。
因为 CSS 自定义属性（--xxx）本质是**继承性 CSS 属性**，不是“变量计算结果”的传递，而是**属性声明本身在 DOM 树中逐层向下传播**——和 color、font-family 的继承机制完全一致，跟选择器权重、!important、内联样式这些层叠规则无关。
自定义属性的继承发生在样式计算哪个阶段？
它发生在「样式计算（Recalculate Style）」的继承环节，而非层叠环节。浏览器先构建 CSSOM 和 DOM 树，再按以下顺序处理：
- 先收集所有作用于该元素的声明（含父级继承来的
--xxx声明） - 再执行继承：把父元素已计算出的
--xxx值（注意，不是原始声明，而是已解析/ fallback 后的值）直接赋给子元素的对应自定义属性 - 最后才对子元素自身的
var(--xxx)进行求值——此时用的已是继承链上最近的有效值
也就是说：var(--color) 不会跨过 DOM 层级去“查找”某个选择器匹配的 --color: red；它只认自己祖先节点上**实际生效并继承下来的那个 --color 值**。
为什么改了父级 class 却没触发子元素的 var() 更新？
常见错觉：以为加个 .theme-dark { --color: #fff; } 就能让所有后代 var(--color) 立刻变白。但实际取决于：
- 该 class 是否加在**继承链上的某个祖先元素**（比如加在
上，但子元素中间隔着一个，就断了）- 是否用了
unset或initial主动切断继承（--color: unset会让子元素 fallback 生效；--color: initial则清空该声明，子元素查不到值，var(--color, blue)才取blue）- Shadow DOM 边界：默认不继承
:root的--xxx，得手动用inherit或part透传怎么验证某层是否真的继承到了自定义属性？
别猜，直接看 DevTools：
- 选中目标子元素 → 打开「Computed」面板 → 拉到最底部点开「Custom Properties」
- 这里列出的是**该元素当前实际继承/声明的全部
--xxx值**，不是它用到的，而是它“拥有”的 - 如果某
--color显示为inherited from，说明继承链通畅；若显示not set，就得往上逐层检查哪一环漏声明、被unset、或压根没命中选择器真正容易被忽略的，是第三方 UI 库悄悄在组件根节点写了
--spacing: unset——它不报错、不显红、甚至不影响视觉，但整条间距变量链就静默中断了。
- 是否用了
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
