var()的第二个参数是回退值，仅在变量完全未声明或显式设为unset时生效；已声明为空字符串、initial、inherit或非法值均不触发回退，这是css规范行为而非bug。
var() 的第二个参数不是“默认值”，是回退值
很多人写 color: var(--text-color, #333)，以为只要 --text-color 没设值，就一定显示 #333。但实际只有两种情况会触发这个回退：变量在所有作用域中**完全未声明**，或被显式设为 unset。如果 :root { --text-color: ""; }，那 var(--text-color, #333) 取到的是空字符串，浏览器直接丢弃整条 color 声明，最终降级为 inherit（常表现为透明或继承父级颜色）。
空字符串、initial、inherit 都不会触发回退
这些是合法的 CSS 值，哪怕语义上“无效”，var() 也会照单全收，不跳到第二个参数。常见踩坑点：
-
:root { --size: ""; }→font-size: var(--size, 16px)不生效，文字用浏览器默认 size -
el.style.setProperty('--color', 'initial')→color: var(--color, red)显示 initial，不是 red -
getComputedStyle(el).getPropertyValue('--size')返回""，无法区分“真未定义”和“定义为空”
JS 动态设置时怎么让回退真正生效
用 JS 清空变量，不能只设空字符串。可靠做法只有两个：
-
el.style.removeProperty('--size')—— 仅当该变量没在祖先节点声明时才有效 -
el.style.setProperty('--size', 'unset')—— 更通用，但 IE 和部分旧 Android WebView 不支持 - 最稳妥的兜底：JS 里主动判断，避免传空 ——
el.style.setProperty('--size', size || '16px')
多级回退要防循环引用和嵌套过深
写 background: var(--bg, var(--fallback-bg, #fff)) 是安全的，但注意：
- 嵌套不超过两层，最内层必须是字面量（如
#000、1rem） - 禁止
var(--a, var(--b, var(--a, black)))这类循环，Chrome 会静默失效并报CSS Parser: cycle detected in variable reference - 回退值里别写
calc(var(--x))或rgba(var(--r), ...)，旧版 Safari 可能直接丢弃整条声明
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
