CSS 选择器优先级：两条规则打架，谁赢

同一个元素，两条规则都想管颜色，浏览器听谁的？

老派前端代码里最常见的迷惑现场之一：你明明写了一行 color: red，元素却显示成别的颜色。不是浏览器出错，是另一条规则的优先级更高，把这一行盖掉了。这一节挂在 03 节下面，用的是同一套「别猜，拿现场判断」的思路，只是现场从网页练习换成了两条打架的 CSS 规则。

讲解

每条 CSS 规则的选择器都有一个优先级权重，浏览器按三档权重从左到右比较，不是按「谁写得晚」或「谁写得长」来判[^S11]。三档从高到低：

• ID 选择器（#header）权重最高；
• 类选择器、属性选择器、伪类（.card、[type="text"]、:hover）权重居中；
• 元素选择器和伪元素（div、p、::before）权重最低。

比较时先看 ID 那一档：只要一条规则里 ID 选择器的数量比另一条多，它就赢，不管另一条堆了多少个类选择器[^S11]。ID 档打平了才轮到类选择器那一档比较，类选择器档也打平了才轮到元素选择器档。

只有三档权重完全相同，浏览器才按「谁写在后面」判胜。这也是很多人误以为「优先级看顺序」的来源：顺序只在打平时才生效，权重不同时顺序不起作用[^S11]。!important 是个例外，它会整个跳过这套权重比较，直接压过没标 !important 的规则，但两条都标了 !important 时还是回到权重比较。

下面这个块是真的编辑器。两条规则在抢同一个元素的颜色，改右边的 CSS 让红色赢。

达成目标时上面的状态点会变。这个元素身上同时有 class="title" 和 id="hero-title"，你不用改 HTML，只需要动 CSS：要么削弱 .card .title 这条规则，要么让 .title 那条规则的权重压过它。

跟我做一遍

再看一组对比案例，这次两条规则权重相同：

如果同一个元素同时带 class="badge label"，这两条规则都是「一个类选择器」，权重完全打平。这时候谁赢不看权重，看谁写在样式表后面：如果 .label 排在 .badge 后面，最终就是红色，跟这两个类名「听起来」谁更具体没有关系。这一步专门做对比：上面的编辑器例子是「权重不同，一档一档比」；这里换成「权重打平，才轮到顺序」，两种局面判断规则不一样，别用同一套直觉套两种情况。

换你补全

把下面这句判断补完整：

两条规则的选择器分别是 ____ 和 ____。第一条的权重档位是 ____，第二条是 ____。因为 ____ 档更高，所以最终颜色由 ____ 这条规则决定。

参考答案（用编辑器例子里改之前的两条规则）：

两条规则的选择器分别是 .card .title 和 .title。第一条的权重档位是两个类选择器，第二条是一个类选择器。因为类选择器数量更多的那一档更高，所以最终颜色由 .card .title 这条规则决定（除非像编辑器练习那样提高了另一条的权重）。

<!-- exercises -->

💻 练习（指向你自己的真实环境）

Level 1

在你自己的项目或一个空白 HTML 文件里，写两条选择器权重不同、争同一个元素同一个属性的规则，先预测谁赢，再用浏览器开发者工具的「计算样式」面板核对。

<!-- rubric -->

• 写出两条规则各自的权重档位（ID、类、元素三档各多少个）。
• 在核对前先写下自己的预测，再打开开发者工具核对。
• 如果预测错了，能指出自己看错了哪一档。

Level 2（常见错误剖析）

典型错法：以为选择器「写得更具体」（比如嵌套层数更多）天然等于权重更高。嵌套层数确实经常带来更高权重，因为通常意味着更多类或元素选择器，但真正决定胜负的是三档数量本身，不是嵌套的视觉复杂度。一条单独的 #id 选择器，权重照样压过一长串嵌套的类选择器。

<!-- rubric -->

• 举一个「嵌套很深但权重不如单个 ID 选择器」的反例。
• 说出比较权重时该看哪一档，而不是数嵌套层数。

<!-- /exercises -->

小结

选择器优先级不是玄学，是三档权重从左到右比较，打平才看顺序，!important 是跳过比较的例外。这一节和 Claude Code 那一节题材完全不搭界，但用的是同一套「先讲机制、再给一个能亲手验证的现场」的教法。这正是这个货架想证明的事。