var()回退值仅在变量未定义或显式设为unset时生效，非法颜色值（如bluue、rgb(255,0））属于“已声明但无效”，不触发回退，而是按属性继承规则降级处理。
var() 回退值只响应“未定义”或“unset”，不响应非法颜色值
当你写 color: var(--text-color, #333)，但 --text-color 被设为 bluue 或 rgb(255, 0（缺右括号）这类非法值时，回退值 #333 并不会生效。浏览器会尝试解析那个非法值，失败后按该 CSS 属性的初始行为处理：对 color 来说，就是继承父级颜色或取 inherit —— 所以文字看起来“突然变了色”，其实不是回退了，而是降级到了继承链上某个祖先的计算值。
这和 rgba() 或 oklch() 的 fallback 机制完全不同：var() 的第二个参数不是“兜底所有错误”，它只在两种情况下触发：
-
getComputedStyle(el).getPropertyValue('--text-color')返回null（变量真没声明过） - 变量被显式设为
--text-color: unset
非法颜色值 ≠ 未定义，它属于“已声明但无效”
CSS 自定义属性的值只要语法上构成一条声明（哪怕右边是错的），就算“已存在”。比如这些都算已声明，var() 不会跳到回退值：
-
--text-color: bluue;（拼错颜色名） -
--text-color: rgb(255, 0;（括号不闭合） -
--text-color: ;（空值，注意分号前无内容） -
--text-color: initial;或--text-color: inherit;
此时浏览器仍会把该属性纳入计算流程，只是最终无法得出合法颜色，于是退回到 color 属性自身的继承规则 —— 这就是你看到文字变透明、变灰、或跟父容器一个色的原因。控制台不会报错，开发者工具里 hover var(--text-color, #333) 会显示 “invalid value”，而非 “variable is undefined”。
:root 中漏定义变量，才是回退值真正起作用的场景
只有当整个页面都没出现过 --text-color 的任何声明（包括子应用、动态注入的样式块），var(--text-color, #333) 才会用上 #333。这也是微前端中常见的失真根源：主应用定义了 :root { --primary: #007bff; }，但某个子应用没加载主题 CSS，又没给 var(--primary, #007bff) —— 此时变量未定义，回退生效；但如果子应用写了 .widget { --primary: ; }，哪怕只是个空声明，回退就失效了。
调试建议：
- 打开开发者工具 → Elements 面板 → 选中元素 → 在 Styles 侧边栏搜索
--text-color，看是否列出定义位置 - 执行
getComputedStyle(document.documentElement).getPropertyValue('--text-color')，返回""表示有声明但为空，返回null才是真未定义 - 避免在 JS 中用
style.setProperty('--x', 'bluue')动态赋值，这种写法会创建非法值声明，且无法触发回退
回退值里不能嵌套 var()，也不能写无效语法
var(--color, var(--fallback, #000)) 是非法的，整条 CSS 声明会被浏览器忽略（不是报错，而是静默丢弃）。回退值必须是完整、合法的 CSS 值：
- ✅ 允许：
var(--color, #333)、var(--size, calc(1rem + 2px))、var(--bg, linear-gradient(to right, red, blue)) - ❌ 禁止：
var(--color, var(--fallback))、var(--x, --y)（第二个参数不是值）、var(--color, rgba(0,0,0,0.5), #000)（逗号多了一个）
最容易被忽略的一点：回退值中的函数（如 calc()）是在回退发生时实时求值的，它不访问当前作用域的其他 CSS 变量 —— 所以别指望用 var(--color, calc(var(--base-size) * 1.2)) 这种写法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
