Perché i selettori in CSS vengono ereditati in modo eccessivo?

I selettori in CSS non vengono ereditati. L'eredità in CSS si riferisce al trasferimento di alcune proprietà di un elemento ai suoi discendenti. I selettori sono modelli che scelgono gli elementi a cui applicare gli stili.

L'eredità può significare che gli stili applicati tramite un selettore possono essere sovrascritti (erediti) da stili applicati tramite un altro selettore. Questo non riguarda l'eredità, ma il meccanismo di cascata di CSS, che determina quali stili vengono applicati a un elemento quando più regole CSS impostano un valore per la stessa proprietà.

Fattori che influenzano la cascata e la "sovrascrittura" degli stili:

1. Specificità (Specificity): I selettori con una specificità più alta hanno un peso maggiore.
2. Ordine (Order): In caso di stessa specificità, viene applicata la regola dichiarata per ultima.
3. Importanza (!important): Le dichiarazioni contrassegnate con !important hanno la priorità più alta (eccetto gli stili incorporati dell'User Agent con !important).
4. Origine degli stili (Origin): Gli stili provengono da diverse fonti (browser, utente, autore).

Esempio di specificità:

/* Specificità bassa */
p {
  color: blue;
}

/* Specificità alta - sovrascriverà il colore */
.text-section p {
  color: red;
}