ToolHub
Apri lo strumento

Calcolatore Specificità CSS

Calcola e confronta i punteggi di specificità dei selettori CSS con scomposizione visiva

Strumenti per sviluppatori
Avvia lo strumento Tutti gli strumenti

Informazioni su questo strumento

Il Calcolatore Specificità CSS ti permette di inserire qualsiasi selettore CSS e vedere immediatamente il suo punteggio di specificità, scomposto nelle tre dimensioni ID, classe ed elemento. Supporta il confronto affiancato di due selettori con rilevamento automatico del vincitore, oltre a esempi di selettori comuni e un riferimento alle regole di specificità.

Caratteristiche principali

Anteprima rapida

Casi d'uso

css specificity selector

Domande frequenti

Cos'è la specificità CSS?

La specificità CSS è un sistema di punteggio che determina quali regole CSS vengono applicate quando più selettori puntano allo stesso elemento. Calcola il peso in base ai tipi di selettore: i selettori ID hanno il peso più alto, seguiti dai selettori di classe e attributo, e infine dai selettori di elemento.

Come viene calcolata la specificità?

La specificità viene calcolata come un punteggio in tre parti (ID, classe, elemento). Ogni selettore ID aggiunge 1 alla colonna ID, ogni selettore di classe, attributo o pseudo-classe aggiunge 1 alla colonna classe, e ogni selettore di elemento o pseudo-elemento aggiunge 1 alla colonna elemento.

!important sovrascrive la specificità?

Sì, la dichiarazione !important sovrascrive tutti i calcoli di specificità normali. Quando più regole !important sono in conflitto, vince quella con la specificità più alta. Anche gli stili inline sovrascrivono tutta la specificità basata sui selettori.

Posso confrontare due selettori affiancati?

Sì, lo strumento fornisce un pannello di confronto affiancato dove puoi inserire due selettori e vedere immediatamente quale ha la specificità più alta. Un indicatore di vittoria appare automaticamente accanto al selettore con il punteggio più alto.

Quali tipi di selettore supporta il calcolatore?

Il calcolatore supporta selettori ID, selettori di classe, selettori di attributo, selettori di pseudo-classe (come :hover e :nth-child), selettori di elemento e selettori di pseudo-elemento (come ::before e ::after). Esempi comuni sono disponibili con un clic.

Strumenti correlati

Validatore JSONSelettore ColoreGeneratore di HashGeneratore UUID