var()回退值未生效是因为变量已声明（即使为空字符串、initial等）而非未定义，仅当变量完全未声明或设为unset时才触发回退；伪元素content属性不支持var()；嵌套回退需避免循环引用和作用域错误；edge 18及更早版本不支持var()。
var()回退值没生效，大概率是变量“已声明但无效”
不是浏览器 bug，也不是语法写错，而是 var() 的回退逻辑被误解了：它只在变量**完全未声明**或**显式设为 unset** 时才启用第二个参数；只要变量出现在任何 CSS 规则里（哪怕值是空字符串 ""、initial、inherit 或拼错的 bluue），回退就不会触发。
常见现象：:root { --color: ""; } 后写 color: var(--color, #000);，文字却透明——因为取到了空字符串，该声明被浏览器忽略，最终降级为 inherit，而非跳到 #000。
- 用
getComputedStyle(el).getPropertyValue('--color')检查返回值：若为""，说明变量已定义但为空；只有返回null才代表“真未定义” - 删掉那行声明，比写
--color: ""更安全；真要清空，用--color: unset;（注意兼容性） - 避免在构建流程中自动生成空值变量，比如组件库初始化时写死
--gap: ""
伪元素里 content: var(--x) 永远不生效
content 属性根本不支持 var()，这是 CSS 规范限制，不是 Edge 或 Safari 的兼容性问题。浏览器会静默忽略整条声明，DevTools 里该行会被划掉，且无报错提示。
即使 :root 定义了 --icon: "★"，::before { content: var(--icon); } 也非法。
- 伪元素中只允许用
var()控制支持计算的属性，如color、font-size、background-color - 想动态显示文字？改用
data-*属性 +attr()：<div data-tip="✅"></div>+::after { content: attr(data-tip); } - JS 动态同步时，别只调
element.style.setProperty('--tip', '"✅"')——这不影响content，必须同时更新dataset.tip
嵌套 var() 回退链写错了，反而让整个声明失效
var(--a, var(--b, #000)) 是合法的，但容易踩两个坑：循环引用和作用域错位。
例如：--a: var(--b, red); --b: var(--a, blue); 会导致 Chrome 报 CSS Parser: cycle detected in variable reference，整条规则被丢弃。
- 回退链建议不超过两层，最内层必须是字面量（如
#000、1rem），不能是另一个未兜底的var() -
var(--a, var(--b, #000))中的--b是在当前选择器作用域里查找的，不是自动上溯到:root；如果当前作用域没定义--b，才会触发它的#000 - 回退值里的
var()不参与作用域继承，也不支持calc()或函数式表达式（如clamp()在旧 Safari 中会失败）
Edge 18 及更早版本压根不认识 var() 语法
EdgeHTML 内核（Edge 12–18）对 --custom-property 和 var() 零支持——遇到 color: var(--c, red) 会直接忽略整条声明，退回到属性初始值或继承值，且不报错。
验证方式：打开 DevTools → Elements 面板 → 找到该样式行，若被划掉且 “Computed” 面板里看不到对应值，基本就是这个原因。
- Edge 79+（Chromium 内核）完整支持，包括动态更新和
calc()嵌套 - Edge 75–78 存在竞态 bug：伪元素（
::before/::after）中var()可能读不到最新值，尤其当变量定义在非:root作用域时 - 临时方案：把变量全部提升到
:root；或改用 JS 读取dataset后通过style.setProperty()注入
真正难调试的，是那种“变量明明写了却像没写”的情况——它既不报错，也不渲染，只是悄悄退回到浏览器默认行为。这时候得一层层确认：变量是否真未定义？是否用在了不支持的属性上？是否卡在旧浏览器或伪元素限制里？而不是直接怀疑语法或回退写法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
