CSS 优先级（specificity）是如何计算的？

Question

Accepted Answer

当多条规则作用于同一个元素时，**优先级（specificity）**决定哪一条生效。它是根据选择器各部分计算出的分数，以元组 `(ids, classes, elements)` 的形式进行比较。

```text
Inline style   → 1,0,0,0  (highest, short of !important)
ID             → 0,1,0,0
Class / attr / pseudo-class → 0,0,1,0
Element / pseudo-element    → 0,0,0,1
Universal (*)  → 0,0,0,0  (no weight)
```

从左到右逐列比较，第一个出现差异的列就决定了胜者。

```css
#nav .item a   { color: red; }   /* 1 id, 1 class, 1 element → 1,1,1 */
.menu .item a  { color: blue; }  /* 0 id, 2 classes, 1 element → 0,2,1 */
/* red wins — having ONE id beats any number of classes */
```

## 关键规则

- 单个 **id** 的权重超过任意数量的 **class**；单个 class 的权重超过任意数量的元素选择器。（你无法把多个低层级"累加"起来去战胜一个更高层级。）
- 如果优先级**相等**，则源代码中**靠后**出现的规则生效（源码顺序）。
- **`!important`** 会完全覆盖普通优先级——这是一个万不得已的手段，很难再被覆盖（你需要另一个优先级更高的 `!important` 才能压过它）。

```css
.btn { color: blue !important; } /* ⚠️ wins over almost everything — avoid */
```

## 实用建议

```css
/* ❌ over-specific, hard to override later */
#sidebar ul li.active a { }
/* ✅ keep it flat — one class -> easy to manage */
.nav-link--active { }
```

## 为什么这很重要

大多数"为什么我的 CSS 不生效？"的困惑其实都是优先级冲突——别处某条更具体的规则正在胜出。

让选择器保持低优先级且扁平（优先使用单个 class，避免 id 和 `!important`）能让优先级保持可预测，从而使样式始终易于覆盖和维护。