行内 style 绑定的 CSS 变量（如 style="--color: red;"）是变量继承链中优先级最高的声明源，因其定义位置离使用点最近，后代所有 var(--x) 均读取该值，无法被外部 CSS 重定义覆盖。
行内 style 绑定的 CSS 变量（如 style="--color: red;"）本身不参与层叠计算，但它的“生效值”会直接注入到元素的 element.style 对象中，成为该元素上所有 var(--color) 引用的**最高优先级来源**——不是因为它权重高，而是因为变量定义位置离使用点最近、不可被外部 CSS 重声明覆盖。
为什么 var(--x) 在行内 style 定义后就再也改不动了
CSS 变量的继承链查找是“就近原则”，浏览器从当前元素开始向上遍历 DOM，找第一个声明了 --x 的祖先（含自身）。一旦元素自己通过 style="--x: red;" 声明了该变量，后代所有 var(--x) 都会读取这个值，无论你在 :root、.container 或其他任何选择器里怎么重定义它。
-
style="--color: #f00;"是“声明在元素自身”，比任何父级选择器的声明都更近 - 外部 CSS 写
.card { --color: #00f; }，只影响.card元素及其后代——但如果后代元素自己带style="--color"，那它就跳过整个继承链 - DevTools 的 Computed 面板里搜索
--color，如果显示Defined in element.style，说明已被行内锁定
style="--x" 和 style="color: var(--x)" 是两回事
很多人混淆这两者：前者是变量定义，后者是变量使用。只有前者能锁死变量值；后者只是消费方，完全被动。
-
<div style="--bg: blue; background: var(--bg);">→--bg被行内定义，后续任何外部--bg声明都无效 -
<div class="theme-dark" style="background: var(--bg);">→--bg必须由.theme-dark或其祖先定义，才可被覆盖 - React/Vue 中
:style="{ '--bg': color }"等价于行内style="--bg: ..."，本质相同
绕开行内变量锁定的实操路径
别试图用更高权重的选择器去“覆盖变量声明”，而要让变量定义本身可被动态接管：
立即学习“前端免费学习笔记（深入）”；
- 把行内变量移到
data-属性：<div data-bg="#f00">，再用 CSS 的attr()+!important回填：[data-bg] { --bg: attr(data-bg); }（注意：attr()值需配合!important才能生效） - 用 JS 主动修改：
el.style.setProperty('--bg', '#00f')—— 这会覆盖旧的行内值，且不会触发重排 - 对第三方组件，查文档是否支持
themeprop 或cssVars配置项（如 Ant Design 的ConfigProvider），避免手动写style - Shadow DOM 场景下，变量必须显式设在宿主元素上：
hostEl.style.setProperty('--bg', '...')，否则内部根本读不到
最常被忽略的是：变量是否生效，和你写了多少层嵌套、加了多少个 !important 都无关，只取决于“谁最先在继承链上声明了它”——而行内 style="--x" 永远是那个“最先”的人。
