CSS选择器权重计算全解析：ID类标签得分规则

CSS选择器权重并非简单的十进制加法，而是遵循ID位＞类/伪类位＞标签/伪元素位的三级“位值”模型，逐位比较、不进位：一个ID（如#nav）直接压倒所有类和标签，两个类（.item.active）胜过四个标签（div ul li:first-child），:not()、属性选择器等看似无类实则隐含类位，内联样式以(1,0,0,0)独占最高层级；而!important并不篡改权重数值，仅将声明移入独立优先队列——它让低权重规则也能逆袭高权重普通规则，但同为!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] 本身占类位

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

今天关于《CSS选择器权重计算全解析：ID类标签得分规则》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！