Categoria: Sviluppo
Calcolatore di specificità CSS
Confronta la specificità dei selettori con un punteggio A-B-C
Inserisci uno o più selettori CSS per calcolarne la specificità come punteggio ID-classe-elemento (A-B-C), ordinato in modo da capire quale regola vincerebbe. Funziona interamente nel tuo browser.
| Selettore | Specificità (A-B-C) | ID | Classi, attributi, pseudo-classi | Elementi, pseudo-elementi |
|---|---|---|---|---|
#nav .item > a:hover | 1-2-1 | 1 | 2 | 1 |
.card.featured | 0-2-0 | 0 | 2 | 0 |
button | 0-0-1 | 0 | 0 | 1 |
* | 0-0-0 | 0 | 0 | 0 |
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
Quando due regole CSS puntano allo stesso elemento, vince quella con specificità più alta, non quella scritta per ultima. La specificità si conta come tre numeri: A per i selettori ID, B per classi, selettori di attributo e pseudo-classi, e C per selettori di elemento e pseudo-elementi. Questo strumento analizza ogni selettore inserito, incluse :not(), :is(), :has() e :where() a specificità zero, e restituisce il punteggio A-B-C così puoi confrontare i selettori direttamente invece di indovinare.
Come si usa
- Inserisci un selettore per riga, ad esempio #nav .item > a:hover.
- Leggi il punteggio di specificità A-B-C di ciascun selettore.
- Ordina per specificità per vedere quale selettore vincerebbe in caso di conflitto.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Il mio CSS viene caricato da qualche parte?
- No. L'analisi avviene in JavaScript eseguito nella pagina, quindi i selettori di un foglio di stile privato non lasciano mai il tuo dispositivo.
- Come vengono valutati :not(), :is() o :has()?
- Contribuiscono con la specificità del loro argomento più specifico, secondo la specifica CSS, mentre :where() contribuisce sempre con zero indipendentemente da cosa contiene.
- Lo stile inline o !important influiscono su questo punteggio?
- No. Questo strumento valuta solo i selettori. Un attributo di stile inline e !important sovrascrivono del tutto la specificità normale, invece di sommarsi al conteggio A-B-C.