CSS变量不能在style属性中声明，仅支持引用；必须在:root或选择器中预先定义，再通过var()引用，否则var()因找不到定义而回退到初始值。
不能在 style 属性里声明 CSS 变量供自身或后代使用——它只接受标准 CSS 声明，不支持 --x: value 语法生效。
为什么 style="color: var(--primary); --primary: blue;" 不起作用
浏览器解析 style 属性时，只识别「属性: 值;」格式的声明。一旦遇到 --primary: blue; 这类自定义属性，会直接忽略整条声明（不是报错，是静默丢弃）。var(--primary) 因此找不到变量定义，退回到初始值或继承值。
-
style是纯内联样式容器，不是 CSS 规则块，不支持变量声明语句 - 即使写成
style="--primary: blue; color: var(--primary);"，--primary: blue本身就不合法，整段字符串被截断，后续color也可能失效 - DevTools 的 Styles 面板里看不到任何带
inline标记的--primary条目，就是没进解析流程
想让变量在元素上生效，必须提前在作用域里声明
CSS 变量要起效，得先在某个选择器下正经声明，比如 :root 或父容器类名。元素自己用 style 只能引用，不能定义。
- 正确做法：在
<style>里写:root { --primary: #007bff; }，再用<div style="color: var(--primary);"> - 局部作用域也行：
<div class="card">+.card { --shadow: 0 2px 4px rgba(0,0,0,.1); } <div class="card" style="box-shadow: var(--shadow);"> - 别指望靠
style属性“顺手”把变量塞进去——它没这个能力
动态改变量值？别碰 setAttribute('style', ...)
如果目标是 runtime 更新样式，比如切换主题色，style 属性不是入口，得走 DOM API。
立即学习“前端免费学习笔记（深入）”；
- 用
document.documentElement.style.setProperty('--primary', '#3b82f6')改全局变量 - 用
element.style.setProperty('--bg', '#fff')改局部变量（前提是该元素或其祖先已声明过--bg） - 绝对不要写
element.setAttribute('style', '--primary: red; color: var(--primary);')——前半句无效，后半句因变量未定义而 fallback - 更危险的是覆盖整个
style字符串：会清掉所有已有内联样式，比如 padding、font-size 全丢
真正能 inline 的只有计算后的值
如果你只是想“看起来像动态”，且不需要变量复用或响应式更新，最稳妥的方式是直接写死计算结果：
-
<button style="background-color: #3b82f6; color: white;">—— 没变量，但立刻生效 - 配合 JS：先算好值，再赋给
element.style.backgroundColor，而不是拼--color字符串 - 需要多处同步变？那就得回到
setProperty()+:root声明这套机制，style属性只负责消费，不负责生产
容易被忽略的是：你写的那串 style="..." 字符串，只要有一个分号漏了、一个引号错了、一个单位少，变量引用就全盘失效——而且浏览器连 warning 都不给你。
