CSS变量不参与优先级计算，仅作为值的占位符；内联样式中使用var()仍属内联层级，特异性为1000，高于外部规则，但可被!important覆盖。
内联样式优先级高于 CSS 变量，但变量的“生效位置”决定它是否能参与比较——CSS 变量本身不直接参与优先级计算，它只是值的占位符，最终渲染时被替换为实际值，而那个值所在的声明位置才决定权重。
CSS 变量不参与 specificity 计算
CSS 变量（如 var(--color)）不是样式声明，而是值的引用。浏览器在计算优先级时，只看声明所在的规则来源和选择器权重，不看这个值是不是来自变量。
- 写在外部 CSS 里的
color: var(--text-color);，其优先级完全等同于color: #333;——取决于它所在的规则：是类选择器？ID？还是普通标签？ - 写在
style属性里的color: var(--text-color);，就是内联样式，特异性 = 1000，天然高于所有外部/内部规则（除非对方也带!important） - 变量未定义时（
var(--missing)），该属性值退化为初始值或继承值，此时也不触发任何优先级“竞争”，只是没效果
内联样式中用 var() 仍属内联层级
很多人误以为“用了变量就变弱了”，其实只要 var() 出现在 style 属性里，它就锁死在内联层级。
-
<div style="color: var(--primary);">→ 等效于内联样式，压倒所有非!important的外部类规则 - 但如果外部规则写了
.box { color: red !important; }，且该元素同时有class="box"和style="color: var(--primary);"，那red !important仍会赢——因为!important在同属性上可覆盖内联（前提是它被成功应用） - 注意：若变量本身被 JS 动态改写（
el.style.setProperty('--primary', 'blue')），这属于运行时更新，不影响初始优先级判定逻辑
变量作用域影响的是“取值”，不是“权重”
CSS 变量的“就近原则”只管它从哪读到值，不管这个值最终在哪生效。
立即学习“前端免费学习笔记（深入）”；
-
:root { --c: red; } .modal { --c: blue; } div { color: var(--c); }→ 若div在.modal内，取到blue，但这个color: blue声明仍属于div规则的权重（比如只是标签选择器，权重仅 1） - 反过来，如果
.modal div { color: var(--c); }，那权重是 10 + 1 = 11，比单纯div高，但依然远低于内联 - 常见坑：在 Shadow DOM 里定义变量，宿主元素无法访问；变量跨作用域失效不是优先级问题，是作用域隔离
真正容易被忽略的点是：变量让样式“延迟求值”，而优先级是在 CSS 解析阶段静态确定的。你看到的“蓝色没生效”，大概率不是变量输了，而是变量根本没取到值、或者取到了但所在规则权重太低，又或者被后续 JS 直接抹掉了 style 属性。
