cascade 和 inheritance 如何决定哪些样式应用？

Question

Accepted Answer

当多个规则都可能对元素应用样式时，两个机制决定了结果：**cascade**（哪个规则获胜）和 **inheritance**（哪些属性从父元素传递给子元素）。

## Cascade — 按优先级顺序解决冲突

浏览器通过按以下优先级顺序检查来选择获胜的声明：

```text
1. Importance   → !important beats normal declarations
2. Specificity  → more specific selector wins (ids > classes > elements)
3. Source order → if still tied, the LAST rule defined wins
```

```css
p { color: blue; }          /* specificity 0,0,1 */
.text { color: green; }     /* specificity 0,1,0 → wins over the element rule */
p { color: red; }           /* same specificity as first, but LATER → would beat blue */
/* result for <p class="text">: green (class beats element) */
```

## Inheritance — 某些属性传递给子元素

某些属性（主要是**文本相关**的）会自动被后代元素继承；大多数不会。

```css
body {
  color: #333;        /* ✅ inherited — all text descendants get it */
  font-family: serif; /* ✅ inherited */
  border: 1px solid;  /* ❌ NOT inherited — children don't get a border */
}
```

**默认继承的**：`color`、`font-*`、`line-height`、`text-align`、`visibility`、`cursor`。**不继承的**：`border`、`margin`、`padding`、`background`、`width`、`height`、`display`。

## 显式控制继承

```css
.child {
  color: inherit;  /* force-take the parent's value */
  border: initial; /* reset to the property's default */
  all: unset;      /* reset everything: inherit if inheritable, else initial */
}
```

## Cascade 中的特异性回顾

这就是为什么低特异性规则即使写在后面也会失败的原因 — 特异性是在源顺序之*前*检查的。理解这个顺序（重要性 → 特异性 → 源顺序）可以解释几乎所有"我的样式没有应用"的情况。

## 为什么这很重要

Cascade 和 inheritance 是*CSS 实际如何解析*的核心模型。

了解优先级顺序可以调试冲突，了解哪些属性继承允许你在 `body` 上设置一次 `color`/`font` 而不是到处设置，而 `inherit`/`initial`/`unset` 给你精确的控制 — 它们一起使 CSS 可预测而不是神奇。