var(--x, a;b)中分号导致只取a，因CSS解析器将分号视为声明结束符而静默截断后续内容；fallback必须是合法单一CSS值，不可含未转义分号，引号包裹亦无效。
为什么 var(--x, a;b) 里的分号会让浏览器只取 a？
CSS 自定义属性的 fallback 值（var(--x, fallback) 中的 fallback）不是任意字符串，而是被当作一个“声明值”来解析。分号 ; 在 CSS 声明中是语句结束符，解析器一旦遇到它，就认为当前 var() 的 fallback 部分已结束，后续内容被直接丢弃——不是报错，是静默截断。
- 错误写法：
color: var(--text, #333; opacity: 0.8);→ 浏览器只读到#333，opacity: 0.8被忽略 - 正确写法：如需多值，应拆成多个
var()或用单个合法 CSS 值表达，例如：color: var(--text, #333); opacity: var(--op, 0.8); - 即使 fallback 是函数（如
rgb(255, 0, 0)），内部逗号允许，但外部仍不能出现未引号包裹的分号
var(--x, "a;b") 加引号就能绕过吗？
不能。CSS 中的字符串字面量（用双引号或单引号包裹）在 var() 的 fallback 里**不被支持**。浏览器会直接忽略引号，把里面的内容当普通 token 解析，而分号依然触发截断。
- 无效写法：
content: var(--msg, "Hello; world");→ 实际解析为"Hello，后面被丢弃 - 真正有效的 fallback 必须是符合 CSS 值语法的单一值：颜色、长度、数字、关键字（如
auto）、函数（如calc(1em + 2px)），且**不含未转义的分号** - 若必须拼接含分号的文本（极少见），只能由 JS 动态注入
style.setProperty('--x', 'a;b')，但注意这不会影响var()的 fallback 行为，只影响变量本身取值
为什么 DevTools 不报错，还显示 fallback 值“正常”？
因为解析发生在 CSS 层，而 DevTools 的 Styles 面板只展示你写的原始字符串，不反映运行时被截断后的实际生效值。你看到 var(--x, #333; opacity: 0.8) 写在那里，不代表它真被当成了两个属性。
- 验证方式：选中元素 → Computed 面板 → 搜索对应属性（如
color）→ 看右侧“Value”列是否是你期望的完整值；如果不是，再点开来源行号，确认 fallback 是否被截断 - 常见误判：Computed 显示
color: #333，你以为 fallback 生效了，其实只是它“恰好”合法，而你本意想带透明度的复合值根本没进去 - 这个机制和
@property的syntax校验无关——即使你注册了@property --x { syntax: "*"; inherits: true; }，var()fallback 的分号截断行为依然存在
Vue/React 中动态拼接 CSS 变量要特别注意什么？
框架模板里用插值生成 style="--x: {{ value }};" 时，如果 value 含分号（比如后端返回 "#ff0; font-weight: bold"），整个 --x 声明会因语法非法被浏览器跳过，导致后续所有依赖它的 var(--x) 全部回退到初始值。
立即学习“前端免费学习笔记（深入）”；
- 安全做法：服务端或组件逻辑中提前过滤或转义分号；或改用 JS 设置：
el.style.setProperty('--x', value.replace(/;/g, '')) - 更稳妥的是避免在变量值里塞 CSS 声明片段——CSS 变量设计初衷是存原子值（颜色、尺寸、z-index），不是微型样式表
- 尤其注意 Tailwind 的
class="bg-[--bg-color]"这类 JIT 动态类，若--bg-color值含分号，整个 class 会被忽略，背景不生效
真正危险的不是分号本身，而是它让 CSS 解析器“以为你写完了”，然后默默吞掉后面所有你指望它读到的内容。这种静默失败，在压缩后或跨环境部署时才突然暴露，比报错更难定位。
