子元素直接用color: var(--color-primary)即可获取父级声明的自定义属性，因其天然继承；但若中间某层重置（如unset/initial）则继承链中断。
父级设置--color-primary，子元素怎么直接用？
自定义属性（CSS Custom Properties）天然继承，只要父级声明了--color-primary，子元素用color: var(--color-primary)就能取到——前提是没被中间某层覆盖或重写。继承不是“传递”，而是“沿DOM树向上查找最近的有效声明”。
常见错误现象：div里设了--color-primary: blue，但孙子节点用var(--color-primary)却显示黑色。原因通常是：中间某个父容器（比如.card）又声明了--color-primary: unset或--color-primary: initial，断掉了继承链。
- 只在需要控制样式的容器上设变量，避免在通用组件（如
.btn）里盲目重置 - 用浏览器开发者工具的“Computed”面板点开
color值，往上看“var(--color-primary)”是从哪一层解析出来的 - 如果必须隔离，用
all: inherit要格外小心——它会重置所有继承属性，包括自定义属性
为什么var(--size)在@media里不生效？
自定义属性本身可以响应式，但var()函数不能直接放在@media条件体外做“动态计算”。你不能写width: var(--size); @media (min-width: 768px) { --size: 200px; }——因为--size的声明必须出现在使用它的规则之前，且@media块里的变量声明只在该块内有效。
正确做法是把变量声明也放进@media，并在同一作用域内使用：
立即学习“前端免费学习笔记（深入）”；
section {
--size: 100px;
}
@media (min-width: 768px) {
section {
--size: 200px;
}
}
section {
width: var(--size);
}- 变量声明位置决定作用域，不是“全局注册”；
:root里声明才接近全局效果 -
calc(var(--size) * 2)这种组合是合法的，但--size本身必须已定义 - 不要试图在
style属性里用var()引用@media中声明的变量——内联样式没有媒体查询上下文
var(--bg, #fff)的 fallback 为什么有时不触发？
fallback 只在var()第一个参数完全未定义（not defined）时生效，而不是“值为空”或“值为inherit”。比如父级写了--bg: ;或--bg: none，这仍是“已定义”，fallback 不会接管。
典型误用场景：用 JS 动态设置element.style.setProperty('--bg', '')，以为能触发 fallback，结果子元素拿到的是空字符串，可能造成语法错误（如background-color: ""）。
- 检查是否真未定义：浏览器里选中元素 → Computed → 找
--bg，显示“not set”才说明未定义 - JS 设置时，用
removeProperty('--bg')比设空字符串更可靠 - fallback 不能嵌套：
var(--a, var(--b, red))不合法，CSS 不支持
用:root和用body设变量，有什么实际区别？
:root等价于html，是整个文档的根，所有元素都能继承；body只是html的子元素，它的变量只能被后代继承，但无法影响html自身、伪元素（如::before在html上）、或body之外的元素（比如某些框架插入的portal容器）。
性能与兼容性影响很小，但语义和控制粒度差别明显。比如你想让html背景色也响应主题变量，就必须用:root声明。
- 主题切换、暗色模式等全局配置，一律走
:root - 局部模块（如一个
.dashboard区域）可单独用.dashboard设变量，避免污染全局 - SSR 或微前端场景下，多个
:root声明会叠加，后声明的覆盖先声明的——注意加载顺序
事情说清了就结束。真正难的不是“怎么写”，而是想清楚变量该在哪一级声明、谁该负责重置、以及 fallback 到底是不是你想要的“兜底”行为。
