a11y.skipToMainContent
1

Calcolatore di specificità CSS

Incolla i selettori CSS per vedere i loro punteggi di specificità, confrontali testa a testa, e capire quale si vince.

Was this tool helpful?
Send output to:
Advertisement

How to use CSS Specificity Calculator

  1. Incolla uno o più selettori CSS nella casella di input (uno per linea).
  2. La specificità di ciascun selettore è indicata come tripla (a,b,c) con una ripartizione di ID, classi e elementi.
  3. Quando si inserisce più selettori, il vincitore viene evidenziato in verde con un badge 'WINS'.
  4. Utilizzare il grafico a barre per confrontare visivamente la specificità in tutti i selettori.
  5. Modifica qualsiasi selettore e guarda l'aggiornamento dei risultati in tempo reale.

Che cos'e'?

CSS specificità determina quali stili si applicano quando più regole mirano allo stesso elemento. È calcolato come valore a tre componenti (a, b, c) dove 'a' conta ID, 'b' conta classi/attributi/pseudo-classes, e 'c' conta elementi/pseudo-elementi. I valori più elevati vincono, con 'a' sono i più significativi. Questo strumento analizza i tuoi selettori e rompe immediatamente la loro specificità. Incolla più selettori (uno per linea) e lo strumento evidenzia il vincitore. Esso gestisce correttamente le moderne pseudo-classi CSS come :is(), :not(), :has(), e :where() secondo la specifica CSS Selectors Level 4

Advertisement

FAQ

Cosa significano i numeri (a,b,c)?
I tre numeri rappresentano: a = conteggio di selettori ID (#id), b = conteggio di classi (.class), attributi ([attr]), e pseudo-classi (:hover), c = conteggio di nomi di elementi (div, p) e pseudo-elementi (: prima). Uno stile inline batte tutti; !importante batte tutto tranne un altro!importante.
Come funziona : è() e : no() specificità?
Per i selettori CSS Livello 4 spec, :is() e :not() prendere la specificità del loro argomento più specifico. Per esempio, :is(#id, .class) ha specificità (1,0,0) — il più alto tra i suoi argomenti. :has() funziona allo stesso modo. :dove() contribuisce sempre (0,0,0) indipendentemente dai suoi argomenti.
Che mi dici di!importante?
Le dichiarazioni importanti superano le dichiarazioni normali indipendentemente dalla specificità. Quando due importanti dichiarazioni di conflitto, la specificità è usata per rompere il pareggio. Questo strumento calcola solo la specificità del selettore di base — non tiene conto di !importante.

Related tools

Author

MW
Marcus Webb"The DevTool Craftsman"

Full-Stack Developer & Tools Architect

Marcus has been writing code since the dial-up era. He has contributed to open-source developer tools, built CI/CD pipelines for startups, and debugged production incidents at 3 AM more times than he would like to admit. His philosophy is that the best developer tool is the one that gets out of your way, and he writes about practical tooling that helps teams ship faster with fewer headaches.

📖 CSS Specificity Calculator on Wikipedia·Developer Tools on Wikipedia·CSS Specificity Calculator on Britannica

People also use

← Back to Developer Tools · All tags

Last updated:

Advertisement