CSS Calcolatore della specificità (a,b,c) Online
Calcola la specificità di un selettore CSS (a,b,c) per capire quale regola vince, nel tuo browser.
Specificity: (1,2,3). The larger the tuple (compared left to right), the more the rule wins. Inline styles count as (1,0,0,0) and !important overrides all.
🔒 100 % lato client — nessun dato inviato
Calcola la specificità di qualsiasi selettore CSS e ottieni immediatamente la tripletta (a,b,c). Perfetto per capire perché una regola prevale su un'altra ed eseguire il debug dei conflitti di stile. 100% nel tuo browser, nessun dato inviato a nessun server.
What is it for?
- ▸ Comprendi perché uno stile CSS non viene applicato nonostante la tua regola
- ▸ Confronta due selezionatori per sapere quale vince
- ▸ Evita di abusare di !important modificando i tuoi selettori
- ▸ Insegnare o rivedere le regole di specificità CSS
FAQ
Come si calcola la specificità del selettore CSS?
Conti tre categorie: (a) selettori #id, (b) classi, attributi e pseudo-classi, (c) elementi e pseudo-elementi. Incolla il tuo selettore nello strumento e la tripletta (a,b,c) verrà visualizzata automaticamente.
Quale selettore CSS ha la priorità più alta?
Uno stile in linea batte un ID, che batte una classe, che batte un elemento. Con uguale specificità, prevale l'ultima regola dichiarata, tranne quando viene utilizzato !important.
!important conta ai fini della specificità?
No, !important non fa parte del calcolo (a,b,c): sovrascrive la normale cascata a un livello superiore. Due regole importanti vengono poi decise in base alla loro rispettiva specificità.