Bagaimanakah lata air dan pewarisan memutuskan gaya mana yang digunakan?

Question

IT Interview Practice · Accepted Answer

Apabila beberapa peraturan boleh menggaya elemen, dua mekanisme memutuskan hasilnya: **lata air** (peraturan mana yang menang) dan **pewarisan** (sifat mana yang diwariskan daripada ibu bapa).

## Lata air — menyelesaikan konflik, mengikut urutan keutamaan

Pelayar memilih pengisytiharan yang menang dengan menyemak, mengikut urutan keutamaan:

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

## Pewarisan — beberapa sifat diwariskan kepada anak

Sifat tertentu (terutamanya **berkaitan teks**) diwarisi secara automatik oleh keturunan; kebanyakan tidak.

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

**Diwarisi** secara lalai: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **Tidak diwarisi**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Mengawal pewarisan secara eksplisit

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

## Ringkasan kekhususan dalam lata air

Inilah sebabnya mengapa peraturan kekhususan rendah boleh kalah walaupun ditulis kemudian — kekhususan disemak *sebelum* urutan sumber. Memahami urutan (kepentingan → kekhususan → urutan sumber) menerangkan hampir setiap kes "gaya saya tidak digunakan".

## Mengapa ini penting

Lata air dan pewarisan adalah model teras bagi *cara CSS sebenarnya menyelesaikan*.

Mengetahui urutan keutamaan menghuraikan konflik, mengetahui sifat mana yang diwarisi memungkinkan anda menetapkan `color`/`font` sekali di `body` dan bukannya di mana-mana, dan `inherit`/`initial`/`unset` memberikan anda kawalan yang tepat — bersama-sama mereka menjadikan CSS dapat diramalkan daripada sihir.

Lata air — menyelesaikan konflik, mengikut urutan keutamaan

Pewarisan — beberapa sifat diwariskan kepada anak

Mengawal pewarisan secara eksplisit

Ringkasan kekhususan dalam lata air

Mengapa ini penting

Soalan berkaitan