Calcolatore di Specificità CSS
Calcola la specificità dei selettori CSS, analizza le quattro componenti di peso e ottieni il punteggio numerico complessivo.
Esegui lo strumento
Questo calcolatore analizza la specificita dei selettori CSS e mostra la scomposizione dettagliata delle singole componenti insieme a un punteggio numerico complessivo. Lo strumento calcola il peso delle regole di stile esaminando identificatori univoci con cancelletto, classi, selettori di attributo, pseudo-classi, tag HTML ed elementi virtuali come gli pseudo-elementi. Ogni categoria alimenta una colonna della quaterna standard. Gli identificatori incrementano la prima colonna, classi, attributi e pseudo-classi aumentano la seconda colonna, mentre tag ed elementi di tipo incidono sulla terza colonna. Il selettore universale asterisco non apporta alcun incremento al conteggio. La formula assegna a ciascuna componente un moltiplicatore proporzionale pari a mille, cento, dieci e uno per definire il punteggio totale. Se inserisci un testo vuoto oppure spazi bianchi, il modulo restituisce zeri per tutti i pesi. Con un selettore valido, la schermata mostra subito il riepilogo ordinato e il testo originale inviato per facilitare il debug dei fogli di stile.
Istruzioni
- Inserisci il selettore CSS nel campo di testo dedicato.
- Verifica la sintassi del selettore, includendo eventuali ID, classi, tag o pseudo-classi.
- Avvia il calcolo per elaborare la stringa inserita.
- Controlla il punteggio totale e la suddivisione numerica delle quattro componenti nel riquadro dei risultati.
Esempi
- Inserimento di un selettore semplice come #intestazione: genera una specificità pari a [1, 0, 0, 0] e un punteggio totale di 1000.
- Inserimento di un selettore composto come nav ul li.attivo a:hover: conta classi, tag e pseudo-classi assegnando il valore corrispondente alle rispettive colonne.
FAQ
Che cosa accade se lascio vuoto il campo del selettore?
Il sistema assegna un valore pari a zero a tutte e quattro le componenti di specificità e produce un punteggio complessivo pari a 0.
In che modo incide il selettore universale sul calcolo?
Il selettore universale rappresentato dall'asterisco non aumenta il valore di alcuna colonna di specificità.
Come si calcola il punteggio finale a partire dalle componenti?
La formula moltiplica le quattro componenti rispettivamente per i fattori 1000, 100, 10 e 1, sommando poi i risultati parziali.
Dove finiscono le pseudo-classi e i selettori di attributo?
Le pseudo-classi e i selettori di attributo incrementano la seconda componente, la stessa riservata ai nomi di classe.