ID标签权重解析：CSS选择器优先级计算方法

CSS选择器优先级并非简单的十进制加法，而是基于ID位、类/伪类位、标签/伪元素位构成的“三阶位值”模型，逐位比较、高位优先——一个ID（如#nav）就能碾压任意数量的类或标签，而属性选择器、:not()、:is()等看似低调的写法实则暗藏类位，极易引发意料之外的覆盖；内联样式以(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] 本身占类位

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

本篇关于《ID标签权重解析：CSS选择器优先级计算方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！