Calcolatore di specificità CSS
Calcola la specificità dei selettori CSS e scopri quale ha la priorità.
Calcolatore di specificità CSS
Incolla uno o più selettori CSS, uno per riga, e questo strumento calcola la specificità di ciascuno come il punteggio standard a tre parti: ID, classi (più attributi e pseudo-classi) ed elementi (più pseudo-elementi). La specificità determina quale regola applica il browser quando c'è un conflitto, quindi è utile quando due regole di stile puntano allo stesso elemento e devi sapere quale vince, o quando stai debug perché un override non funziona.
Attiva Dividi elenchi separati da virgole per punteggiare ogni selettore in un elenco come ".a, .b" sulla sua propria riga anziché combinarli in uno. Ordina dal più forte al primo riordina i risultati dalla specificità più alta alla più bassa. Scegli Tabella per un layout a colonne con ID, classi ed elementi scomposti, o notazione 0-1-2 per un punteggio compatto come "1-0-2" per selettore. Mostra spiegazione scomposizione elenca quale parte di ogni selettore — un ID, una classe, un elemento — ha contribuito al punteggio, che è il modo più veloce per vedere esattamente perché una regola supera un'altra.
La calcolatrice segue la specifica CSS Selectors per i casi complicati: :where() ottiene sempre zero indipendentemente da ciò che contiene, mentre :is(), :not() e :has() assumono la specificità dell'argomento più specifico. Un selettore contenente !important è contrassegnato, poiché sostituisce la cascata normale indipendentemente dalla specificità ed è buono da sapere anche se non fa parte del punteggio del selettore stesso. I terminatori di riga Windows e Unix vengono trattati allo stesso modo e le righe vuote vengono ignorate.
Tutto viene eseguito localmente nel tuo browser — i selettori che incolli non vengono mai caricati da nessuna parte, il che è importante se stai controllando una base di codice privata. Copia il risultato, scaricalo come file .txt, o rinvia l'output all'input per continuare a perfezionare i tuoi selettori.