为什么CSS变量的值中包含分号会导致属性值被截断解析？-css教程-PHP中文网

var(--x, a;b)中分号导致只取a，因CSS解析器将分号视为声明结束符而静默截断后续内容；fallback必须是合法单一CSS值，不可含未转义分号，引号包裹亦无效。

为什么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) 写在那里，不代表它真被当成了两个属性。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

验证方式：选中元素 → 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 解析器“以为你写完了”，然后默默吞掉后面所有你指望它读到的内容。这种静默失败，在压缩后或跨环境部署时才突然暴露，比报错更难定位。