!important 有时压不住内联样式，因优先级按来源类型分层判定，内联样式属最高来源档位；css自定义属性不参与特异性计算，仅按作用域链查找最近有效声明。
为什么 !important 有时压不住内联样式？
因为优先级不是简单叠加，而是分层判定：浏览器先按「来源类型」分档（用户代理 !important。内联样式的来源层级天然高于外部 CSS 文件里的 !important，所以它赢在第一轮，根本没机会比后面。
实操建议：
- 遇到内联样式压不倒，别硬加
!important，先查是不是 js 动态写了element.style.color = "red" - 想覆盖内联样式，只能用更高来源层级（如浏览器扩展注入的 CSS）或直接改
element.style属性 -
!important在同源 CSS 中生效，但跨源时受层级压制，不是“绝对最高”
specificity 的三位数怎么算？别背公式，看实际匹配
所谓“100-10-1”模型只是助记：ID 选择器算 100，类/属性/伪类算 10，标签/伪元素算 1。但它不支持进位——#nav .item:hover div 是 100+10+10+1 = 121，不是 131；而 div#main.content[role="banner"] 是 100+10+10+10+1 = 131，不是 141。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 以为
.a.b.c.d（四个类）能干掉#id—— 实际是 40 - 用
:not(.x)包裹时，括号里算特异性：:not(#id)整体算 100，:not(.cls)算 10 -
*{}特异性为 0，但会匹配所有元素，容易被误认为“没效果”，其实是被更高特异性规则盖掉了
行内样式、<style></style> 和外部 .css 的优先级谁先谁后？
来源顺序决定初始档位：外部文件 <link> 和 <style></style> 同属“作者样式”，行内样式是“作者样式（内联）”，属于更高子档位。所以三者排序是：行内 > <style></style> ≈ 外部 CSS（按加载顺序后写的覆盖前写的）。
使用场景注意点：
- 组件库常用
<style scoped></style>或 CSS-in-JS，本质是生成带唯一属性的选择器（如[data-v-abc123]），靠增加一个属性选择器（+10）提升特异性 - 用
@import加载的 CSS，其声明顺序以@import出现位置为准，不是文件物理位置 - Vite / webpack 的 CSS 提取插件可能把
<style></style>内联内容抽成外部文件，此时它就降级为普通外部 CSS，不再优先于<link>
用 CSS Custom Properties 能绕过优先级计算吗？
不能绕过，但改变了计算时机：自定义属性本身不参与渲染，只在 var(--color) 被引用时，才去当前作用域链上查找最近的有效声明。这个查找过程**不看特异性，只看作用域和继承链**。
所以：
-
:root { --c: red; } div { --c: blue; } p { color: var(--c); }→p从父级div拿到blue，哪怕:root有更高特异性 - 如果
p自己设了--c: green，那就用green，跟父级或全局无关 - 自定义属性可以被 JS 动态修改：
document.documentElement.style.setProperty('--c', 'orange')，这会实时影响所有引用处，且无需重新计算选择器优先级
复杂点在于嵌套引用和 fallback：比如 color: var(--x, var(--y, black))，fallback 里又套 var()，这时每一层都独立查作用域，不是一次性算完。