为什么CSS变量在行内样式中不生效_检查HTML转义及变量名命名规范-css教程-PHP中文网

css变量在内联style中无法使用var()函数，因浏览器原生不支持——该语法仅在css层（或外部.css）解析，内联样式只接受静态值，var()会被静默丢弃；必须通过js调用getcomputedstyle().getpropertyvalue()读取后手动赋值。

为什么css变量在行内样式中不生效_检查html转义及变量名命名规范

CSS变量（Custom Properties）在style属性中写var(--x)根本不会计算——这不是转义问题，也不是命名不规范导致的，而是浏览器明确不支持该语法。行内样式只接受静态值，var()函数解析仅发生在CSS层（<style></style>或外部.css文件），不在HTML解析阶段执行。

为什么`style="color: var(--primary)"`完全没反应

开发者工具的Styles面板里压根不显示这条声明，Computed里对应属性还是inherit或初始值。这不是你漏写了:root、没加!、路径错了，也不是--primary拼成-primary——哪怕所有定义都正确，var()在style属性中就是被浏览器静默丢弃。

Chrome 62–64曾短暂实验性支持，但已移除；当前所有主流浏览器（Chrome 120+、Firefox 115+、Safari 17+）均不支持
style属性只认标准CSS属性名（如color、margin），--primary这种自定义属性名属于非法token，整条声明都会被忽略
别试style="--primary:#007bff; color: var(--primary)"——前半句无效，后半句因无定义而失效

HTML转义和命名规范不是主因，但容易混淆判断

很多人排查时会盯着--primary或--primary大小写，其实这些都不是根本障碍：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

--Primary和--primary确实是不同变量，但即使全小写、无空格、无特殊字符，var()在style里照样不生效
HTML中"、'等转义不影响style属性解析逻辑，浏览器拿到的是解码后的字符串，但依然不进CSS变量处理流程
真正该检查的是：你是否误把“必须在CSS层使用”理解成了“只要名字对就能用”

想在JS控制下用CSS变量，只能手动取值再赋值

唯一可行路径是绕过var()，用JS读取计算后的值，再写入style属性：

const primary = getComputedStyle(document.documentElement)
  .getPropertyValue('--primary')
  .trim();
element.style.color = primary;

getPropertyValue()返回带前后空格的字符串，务必.trim()
如果变量定义在非:root作用域（比如.theme-dark { --bg: #111 }），要传入对应元素而非document.documentElement
注意加载时序：确保CSS文件已加载完成、变量已定义，再执行这段JS

真正容易被忽略的点是：CSS变量的设计本意是“级联 + 动态响应”，不是为内联样式服务的。一旦你开始频繁往style里塞var()，说明架构上可能更适合用class切换主题，而不是靠JS硬塞值。