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

Istruzioni

1

Il W3C utilizza formule matematiche per determinare il peso di un particolare stile. Dispone di uno stile più peso, è il più specifico.

2

In XHTML strict (dove non si utilizza gli stili inline) specificità è calcolato utilizzando tre numeri. Ad esempio, 0, 0, 0. Queste posizioni sono indicate come a, b, c. non pensare a loro come 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 ID è sempre la più specifica:

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

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

contenuto .post_head specificità = 1, 1, 0 5

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

contenuto di specificità p = 1, 0, 1header #logo specificità di p = 2, 0, 1 6

Se c'è un pareggio per il numero di ID, quindi vince il selettore con la maggior parte delle classi. Se c'è ancora un pareggio, vince il selettore con più elementi. Se due selettori sono ancora legati, il conflitto viene risolto dalla posizione della regola nella cascata.

7

Un valore nella prima posizione avrà sempre più peso rispetto a un valore in qualsiasi altra posizione, non importa quali sono i valori in altre posizioni di altri. Ad esempio, un valore di 1, 0, 0 ancora ha una maggiore specificità rispetto a un valore di 0, 0, 10.

8

Se gli stili inline sono ammessi (come in XHTML transitional), sono necessari quattro numeri. Il peso di uno stile in linea è dato in prima posizione. Ecco alcuni esempi di utilizzo di quattro cifre:

specificità di contenuto = 0, 1, 0, specificità p 0content = 0, 1, 0, 1

Se uno stile in linea sono stati aggiunti nel codice HTML, dire a un elemento di P nel div contenuto, allora i numeri sarebbe:
1, 1, 0, 1

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

Consigli & Avvertenze

• L'utilizzo di un'istruzione importante in CSS può annullare qualsiasi regola nella cascata.