Come decidono la cascata e l'ereditarietà quali stili si applicano?

Question

Accepted Answer

Quando più regole potrebbero stilizzare un elemento, due meccanismi decidono il risultato: la **cascata** (quale regola vince) e l'**ereditarietà** (quali proprietà si trasmettono dai genitori).

## La cascata — risolvere i conflitti, in ordine

Il browser sceglie la dichiarazione vincente controllando, in ordine di priorità:

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

## Ereditarietà — alcune proprietà si trasmettono ai figli

Certe proprietà (soprattutto **text-related**) sono ereditate automaticamente dai discendenti; la maggior parte non lo è.

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

**Ereditate** per impostazione predefinita: `color`, `font-*`, `line-height`, `text-align`, `visibility`, `cursor`. **Non ereditate**: `border`, `margin`, `padding`, `background`, `width`, `height`, `display`.

## Controllare esplicitamente l'ereditarietà

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

## Riepilogo della specificità all'interno della cascata

Ecco perché una regola a bassa specificità può perdere anche se è scritta dopo — la specificità viene controllata *prima* dell'ordine di origine. Comprendere l'ordine (importanza → specificità → ordine di origine) spiega quasi ogni caso di "il mio stile non si applica".

## Perché è importante

La cascata e l'ereditarietà sono il modello fondamentale di *come CSS risolve effettivamente*.

Conoscere l'ordine di precedenza debugga i conflitti, sapere quali proprietà vengono ereditate ti permette di impostare `color`/`font` una sola volta su `body` invece che ovunque, e `inherit`/`initial`/`unset` ti danno un controllo preciso — insieme rendono CSS prevedibile piuttosto che magico.