Come funzionano le diverse priorità degli stili in CSS?

In CSS, le priorità degli stili sono determinate dal meccanismo di cascata e dalla specificità dei selettori. I principi principali sono:

1. Specificità — è il peso del selettore, calcolato in base al numero di ID, classi, tag e altri componenti. Più alta è la specificità, più prioritario è lo stile.

   • Il selettore ID (#id) ha un'alta priorità.
   • Le classi (.classe), attributi e pseudoclassi hanno priorità media.
   • I tag (div, p) hanno priorità bassa.

2. Cascata — se due regole hanno la stessa specificità, si applica quella dichiarata più tardi nel codice.

3. !important — aggiunge la priorità massima allo stile, sovrascrivendo altre regole, tranne altre !important con una specificità più alta.

4. Ereditarietà — alcune proprietà (ad esempio, color, font-family) vengono ereditate dal genitore se non sono ridefinite.

Esempio:

#header { color: red; }       /* specificità 100 */
.menu { color: blue; }        /* specificità 10  */
div { color: green; }         /* specificità 1   */

/* Se un elemento ha id="header" e classe="menu", il colore sarà rosso */

In questo modo, il browser sceglie lo stile con la specificità più alta, considerando l'ordine e la presenza di !important.