CSS选择器权重按ID位、类位、标签位三级“位值”模型逐位比较，非十进制加法；ID位相同则比类位，类位高者胜，与标签数量无关；:not()、属性选择器等隐含类位，内联样式为(1,0,0,0)；!important不改变权重，仅提升应用优先级。
CSS 选择器权重怎么算：ID、类、标签的得分不是加法
权重不是 100 + 10 + 1 那种十进制加法，而是三进制“位值”模型：ID 位 > 类/伪类位 > 标签/伪元素位。同一级里多几个类，不进位；但一个 ID 就直接压过所有类。
为什么 #nav .item.active 比 div#nav ul li:first-child 优先级高
前者权重是 (1,2,0)（1 个 ID、2 个类），后者是 (1,0,4)（1 个 ID、0 个类、4 个标签）。类位（第二位）比标签位（第三位）高，所以 (1,2,0) > (1,0,4) —— 即使后者写了 4 个标签名也没用。
- 权重比较是逐位进行的：先比 ID 位，相等再比类位，再相等才比标签位
-
:hover、:not()内部的选择器不算类位，但:not(.disabled)整体算 1 个类位 -
style="..."是内联样式，权重为(1,0,0,0)，高于任何 CSS 选择器
!important 不改变权重，只改变应用顺序
!important 不是“把权重拉到天花板”，它只是让声明脱离常规层叠流程，单独归入“重要声明”队列。同为 !important 的规则，依然要按权重和源顺序比。
- 两个
!important声明冲突时，#header { color: red !important; }仍赢过.header { color: blue !important; } - 普通声明永远打不过同选择器的
!important，哪怕后者权重低（比如div { color: green !important; }能覆盖#app的普通color） - 浏览器 DevTools 里显示为 “specificity: 0,0,0” 的
!important行，不代表没权重，只是它已跳过权重比对阶段
容易被忽略的“隐形类位”来源
有些写法看着没写类名，实际占了类位，导致意外压过其他规则：
立即学习“前端免费学习笔记（深入）”；
-
[type="submit"]是属性选择器，算 1 个类位（不是 0） -
:is(.btn, .primary)整体算 1 个类位；:where()和:has()同理，不为零 -
::before是伪元素，算 1 个标签位；但::-webkit-scrollbar-thumb这种带前缀的，仍是 1 个标签位 -
*[lang]中的*不贡献权重，但[lang]本身占类位
权重这事，看的是“结构层级”，不是字符长短。写得越啰嗦，不一定越强；写得越精简，也不一定越弱——关键在那三位数字怎么排。
