var()嵌套仅在当前元素作用域内查找变量，不触发继承；继承由DOM结构决定，嵌套回退则依赖变量是否在该作用域中已定义且非空、unset或initial。
var() 嵌套语法本身不触发“继承”，只做作用域内查找
很多人误以为 var(--a, var(--b, #000)) 是在“向上继承”变量，其实不是。浏览器解析时，只在**当前元素的作用域内**依次查找 --a、--b，不会自动跳到父元素或 :root 去找——除非那个变量恰好被父元素定义并继承下来了。
也就是说，嵌套回退和继承是两件事：继承决定变量值从哪来，var() 嵌套决定查不到时往哪 fallback。
-
--a在当前元素上未声明 → 查--b（仍在当前元素作用域） -
--b也未声明 → 用#000 - 如果
--b被父元素定义且可继承，那它会自然落到当前元素上，此时var(--b, #000)就能取到，但这靠的是继承机制，不是嵌套语法的功劳 - 若父元素写了
--b: unset或--b: ""，则--b视为“已定义”，var(--b, #000)不会 fallback，直接用那个空/无效值
让多级主题真正生效，必须保证 fallback 变量落在正确作用域
比如想实现「组件级变量 → 主题级变量 → 全局兜底色」三级链：var(--card-bg, var(--theme-bg, var(--fallback-bg, #fff)))，这串写法本身合法，但能否走通，取决于三者是否都在当前元素作用域中可用。
-
--card-bg应由组件自身设置（如.card { --card-bg: #f8f9fa; }） -
--theme-bg必须定义在该组件的祖先链上（推荐:root或包裹容器），且不能被中间某层设为unset或initial -
--fallback-bg如果只在:root定义，而当前元素没继承到（比如被all: unset截断），那最内层var(--fallback-bg, #fff)仍会 fallback 到#fff——因为--fallback-bg根本没定义 - 调试时别只看 DevTools 的 Styles 面板，用
getComputedStyle(el).getPropertyValue('--theme-bg')拿实际值更准
Shadow DOM 和第三方组件里，var() 嵌套容易静默失效
Web Component 的 Shadow DOM 默认不继承外部 CSS 变量，即使你在 :root 定义了 --primary-color，<my-button></my-button> 内部写 var(--primary-color, blue) 也会 fallback，除非宿主元素（即 <my-button> 标签本身）显式透传：
立即学习“前端免费学习笔记（深入）”；
my-button {
--primary-color: var(--primary-color); /* 把外部值透进来 */
}第三方 UI 库（如 Ant Design）内部往往用高权重选择器或 Shadow DOM 封装了自己的变量逻辑，你写在 :root 的 --ant-primary-color 很可能被忽略。
- 不要改
:root，改用命名空间限定：.my-app .ant-btn { --ant-primary-color: #1890ff; } - React/Vue 中动态控制：用
ref拿到宿主元素，调el.style.setProperty('--ant-primary-color', '#1890ff') - 避免在
@keyframes或伪元素里依赖嵌套var()，它们不继承自定义属性
空字符串、unset、initial 是最隐蔽的断链点
只要变量被声明为以下任一形式，整条 var(--x, ...) 回退链就中断，后续 fallback 不再触发：
-
--x: ""（空字符串 → 渲染为透明/无效值） -
--x: unset（明确切断继承，且不触发 fallback） -
--x: initial（行为不稳定，旧版 Safari 可能视作“已定义”）
真正安全的“清空”方式是删掉该声明，或确保 fallback 最内层有确定值——比如 var(--color, var(--text-color, #333)) 里 #333 是硬编码，不会因上游污染而失效。
嵌套层级本身没有限制，但循环引用（--a: var(--b); --b: var(--a)）会导致整条 CSS 声明被浏览器忽略，还不报错，排查时容易漏掉。
