Suggerimento rapido informazioni sulla specificità CSS

La "C" in CSS sta per a cascata. Ciò significa che le regole di stile mostrate più avanti nel foglio di stile sostituiranno quelle che appaiono in precedenza. Ma questo non è sempre il caso. C'è qualcos'altro che devi prendere in considerazione, anche: specificità. In questo suggerimento veloce, ti mostrerò come fare proprio questo.

Regole di specificità

Specificità CSS è fondamentalmente questo: più specifico è il tuo selettore, maggiore è la precedenza che avrà. Per capire quali selettori valgono di più, usa questo sistema:

• Assegna 1 punto a ciascun selettore di elementi HTML. Esempio: p
• Dai a ogni selettore di classe 10 punti. Esempio: .column
• Dare a ciascun selettore di identificazione 100 punti. Esempio: #wrap
• Aggiungi i punti per ogni parte del selettore per ottenere il valore completo del selettore.

Per esempio

 # test background: rosso;  / * specificity: 100 * / .item p background: green;  / * specificity: 10 + 1 = 11 * / p background: orange;  / * specificity: 1 * / body #wrap p background: yellow;  / * specificità: 1 + 100 + 1 = 102 * /