カスケードと継承は、どのようにして適用されるスタイルを決定しますか？

Question

Accepted Answer

複数のルールが要素をスタイルできるとき、2つのメカニズムが結果を決定します：**カスケード**（どのルールが勝つか）と**継承**（親からどのプロパティが子に受け継がれるか）。

## カスケード — 優先順で競合を解決

ブラウザは、優先順で次をチェックして、勝つ宣言を選択します：

```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) */
```

## 継承 — いくつかのプロパティは子に受け継がれます

特定のプロパティ（主に**テキスト関連**）は、子孫に自動的に継承されます。ほとんどのプロパティは継承されません。

```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 */
}
```

## カスケード内の詳細度の要約

詳細度が低いルールでも、後に書かれていても失う可能性があるのはこのためです — 詳細度はソースの順序*より前*にチェックされます。順序（重要度 → 詳細度 → ソース順）を理解すれば、ほぼすべての「スタイルが適用されない」ケースを説明できます。

## なぜ重要なのか

カスケードと継承は、*CSSが実際に解決する仕組みの*コアモデルです。

優先順を知ることは競合をデバッグでき、どのプロパティが継承されるかを知ることで`color`/`font`を`body`に一度設定するだけで済み、`inherit`/`initial`/`unset`は正確な制御を可能にします — 一緒になれば、CSSを魔法ではなく予測可能にします。