CSS选择器权重计算模型_ID、类、标签的得分规则

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] 本身占类位

权重这事，看的是“结构层级”，不是字符长短。写得越啰嗦，不一定越强；写得越精简，也不一定越弱——关键在那三位数字怎么排。