Calcolo della specificità: inline, ID, classe, elemento
Calcoli i punteggi di specificità e prevedi quale regola prevale in qualsiasi conflitto di stile.
Calcolo della specificità: inline, ID, classe, elemento è una lezione CSS Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento CSS Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso CSS Academy include 4 lezioni in totale.
Che cos'è la specificità?
La specificità determina quale regola CSS prevale quando più regole si applicano allo stesso elemento e alla stessa proprietà. Viene calcolata come un punteggio a 4 componenti: (A, B, C, D), dove A è la più alta e D la più bassa.
Componenti della specificità
Le quattro colonne:
- A: stili inline (attributo style="") = 1,0,0,0
- B: selettori ID (#id) = 0,1,0,0
- C: selettori di classe (.class), selettori di attributo, pseudoclassi = 0,0,1,0
- D: selettori di tipo (elemento), pseudo-elementi = 0,0,0,1
Esempi di specificità
Calcolo della specificità:
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>Il selettore universale non ha specificità
Il selettore universale *, i combinatori (+, >, ~, spazio) e la pseudoclasse :where() contribuiscono tutti con zero (0,0,0,0) alla specificità.
Gli stili inline prevalgono
Gli stili inline (attributo style="") hanno la specificità più alta (1,0,0,0). Solo !important può sovrascriverli da una regola del foglio di stile.
Confronto dei punteggi di specificità
Confronti da sinistra a destra. La prima colonna in cui i punteggi differiscono determina quale regola prevale. (0,1,0,0) prevale su (0,0,99,99) perché la colonna degli ID prevale immediatamente.
Specificità di :is(), :not() e :has()
:is(), :not() e :has() assumono la specificità del loro argomento più specifico:
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>Specificità di nth-child
:nth-child(), :first-child, :hover e le altre pseudoclassi aggiungono tutte (0,0,1,0), cioè una specificità a livello di classe.
Specificità dei pseudo-elementi
::before, ::after, ::first-line ecc. aggiungono (0,0,0,1), cioè una specificità a livello di elemento. Si trovano nella colonna D.
La specificità non è l'ereditarietà
La specificità viene calcolata per ogni proprietà e per ogni elemento. Una regola con specificità maggiore prevale per una determinata proprietà, ma i valori ereditati da un elemento padre con specificità elevata non prevalgono sulle regole dirette più specifiche applicate all'elemento figlio.
Strumenti per calcolare la specificità
Utilizzi strumenti online come specificity.keegan.st o DevTools del browser per verificare la specificità. In DevTools, gli stili barrati nel pannello Styles indicano che ha prevalso una regola più specifica.
Verifica rapida
Quale selettore ha una specificità maggiore: #sidebar .link oppure .nav .nav-item .nav-link.active?
Riepilogo
I punteggi di specificità sono (A, B, C, D): stili inline, ID, classi/attributi/pseudoclassi, elementi/pseudo-elementi. Confronti da sinistra a destra: prevale la prima colonna diversa. :where() contribuisce sempre con zero. Un ID prevale su un numero qualsiasi di selettori di classe. Utilizzi il pannello Styles di DevTools per vedere quali regole prevalgono e perché.
Domande Frequenti
La lezione «Calcolo della specificità: inline, ID, classe, elemento» è gratuita?
Sì — il testo completo di «Calcolo della specificità: inline, ID, classe, elemento» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso CSS Academy, passa a CoddyKit PRO. Il corso CSS Academy include 4 lezioni in totale.
Cosa imparerò in «Calcolo della specificità: inline, ID, classe, elemento»?
Calcoli i punteggi di specificità e prevedi quale regola prevale in qualsiasi conflitto di stile. Eserciti CSS Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare CSS Academy?
Non è richiesta alcuna esperienza precedente. CSS Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «Calcolo della specificità: inline, ID, classe, elemento»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione CSS Academy?
Sì. Ogni lezione CSS Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- Calcolo della specificità: inline, ID, classe, elemento
- La cascade: origine e ordine
- !important: quando usarlo e perché evitarlo
- Ereditarietà e proprietà all