Hai mai aggiunto una nuova regola per il foglio di stile CSS, ma visto nessun cambiamento nei risultati della pagina nella finestra del browser? Forse il nuovo selettore non era sufficientemente specifiche per annullare una regola esistente nel foglio di stile. Questo articolo spiega come calcolare matematicamente il peso specifico dei vostri selettori CSS.

istruzione

1 Il W3C utilizza formule matematiche per determinare il peso di qualsiasi stile particolare. Il peso più uno stile ha, più specifica che è.

2 In stretta XHTML (in cui non si utilizza stili inline) la specificità è calcolato utilizzando tre numeri. Ad esempio 0, 0, 0. Queste posizioni sono indicati come a, b, c. Non pensare a loro come i numeri nel senso normale.

3 Il primo numero a sinistra (posizione a) è il più importante, o più pesantemente ponderato. Il primo numero a sinistra è il numero di ID nel selettore. ID vince il maggior numero di punti in questo gioco. Un selettore con il maggior numero di punti di identificazione è sempre il più specifico:

intestazione specificità = 1, 0, 0header #logo specificità = 2, 0, 0

4 Il secondo numero rappresenta il numero di selettori di classe, pseudo-classi e attributi:
.post_head specificità = 0, 1, 0

contenuti .post_head specificità = 1, 1, 0

5 Il terzo numero rappresenta il numero di elementi e pseudo-elementi selettori:
p specificità = 0, 0, 1

contenuti p specificità = 1, 0, 1header #logo p specificità = 2, 0, 1

6 Se c'è un pareggio per il numero di ID, quindi il selettore con la maggior parte delle classi vince. Se c'è ancora un pareggio, il selettore con il maggior numero di elementi vince. Se due selettori sono ancora legati, allora il conflitto si risolve con la posizione della regola nella cascata.

7 Un valore nella prima posizione avrà sempre più peso di un valore in qualsiasi altra posizione, non importa quale valori sono in altre altre posizioni. Ad esempio, un valore di 1, 0, 0 ha ancora una specificità superiore ad un valore di 0, 0, 10.

8 Se gli stili inline sono consentiti (come in XHTML di transizione), sono necessari poi quattro numeri. Il peso di uno stile in linea è data nella prima posizione. Ecco alcuni esempi che utilizzano quattro cifre:

contenuti specificità = 0, 1, 0, 0content p specificità = 0, 1, 0, 1

Se uno stile in linea sono stati aggiunti nel codice HTML, dire ad un elemento P nella div contenuti, allora i numeri sarebbero:
1, 1, 0, 1

In questo caso la specificità sarebbe maggiore per il paragrafo con lo stile in linea rispetto agli altri paragrafi del div contenuto, vincendo così la battaglia specificità.

Consigli e avvertenze

• L'uso di una dichiarazione importante in CSS può annullare qualsiasi regola nella cascata.