Calcola la specificità CSS e scopri quale regola vince
Incolla i selettori per contarne la specificità, oppure incolla CSS e un elemento per vedere la regola che si applica.
- Funziona sul tuo dispositivo
- Senza registrazione
- Funziona offline dopo una visita
Stili predefiniti del browser e altri fogli non inclusi. Nulla viene inviato.
| Selettore | Specificità | Peso | Contesto |
|---|
| Regola | Valore | Specificità | Layer | Risultato |
|---|
Come capire quale regola CSS vince
- Scegli una modalità: conta i selettori oppure trova la regola vincente.
- Incolla i selettori, oppure il CSS, l'HTML e la proprietà.
- Leggi il punteggio, oppure la regola vincente e il motivo per cui le altre hanno perso.
Domande
Come si calcola la specificità?
Ogni id vale 1,0,0, ogni classe, attributo o pseudo-classe 0,1,0, e ogni nome di elemento o pseudo-elemento 0,0,1. Il selettore universale e :where() non valgono nulla.
Come contano :is(), :not() e :has()?
Contano come il loro argomento più forte. Quindi :is(#a, .b) p vale 1,0,1, perché #a è la parte più forte dentro :is(). La regola con :where(#a) p vale 0,0,1.
Perché una regola con layer perde contro una regola semplice?
Per le dichiarazioni normali, le regole fuori da ogni layer battono quelle nei layer. Per !important l'ordine si inverte, quindi vince un layer precedente. Un attributo style normale batte ogni regola dei fogli di stile normali, e un attributo style con !important batte ogni altra regola !important.
Il mio CSS viene inviato da qualche parte?
No. Il browser analizza e confronta i selettori in questa scheda, e nulla viene inviato a un server.
Recensioni
Nessuna recensione per ora. Sii il primo.