Relazione tra! Importante e specificità CSS

Osservando le specifiche di specificità CSS , non si fa menzione di quanti “punti” vale la regola !important .

Quando si sovrascrive un altro? Cosa succede se uno viene dichiarato dopo l’altro? Quale regola è dichiarata più importante? C’è una sorta di modello?

A giudicare dall’aspetto !important applica a ciò che ha più punti di specificità per cominciare. Ma cosa succederà se dichiari un id di biliardo accumulato con classi e annidato profondamente? Sostituirà le regole impostate in un’altra regola meno specificata contrassegnata da !important ?

La specificità nel CSS riguarda solo i selettori , non le loro dichiarazioni associate. !important applica a una dichiarazione, quindi da sola non ha alcun ruolo nella specificità.

Tuttavia !important influenza la cascata , che è il calcolo complessivo degli stili per un determinato elemento quando si applica più di una delle stesse dichiarazioni di proprietà. Oppure, come descrive succintamente Christopher Altman :

  1. !important è una carta picche . Supera tutti i punti di specificità.

Ma non solo: perché influenza la cascata complessiva, se hai più di un !important selettore con una regola contenente una !important dichiarazione che corrisponde allo stesso elemento, allora la specificità del selettore continuerà ad applicarsi. Di nuovo, questo è semplicemente dovuto all’applicazione di più di una regola allo stesso elemento.

In altre parole, per due regole con selettori non uguali nello stesso foglio di stile (ad esempio lo stesso foglio di stile utente, lo stesso foglio di stile dell’autore interno o lo stesso foglio di stile dell’autore esterno), si applicano le regole con il selettore più specifico. Se esistono stili !important , vince quello nella regola con il selettore più specifico. Infine, dal momento che puoi avere solo qualcosa che è importante o meno, è abbastanza lontano da poter influenzare la cascata.

Ecco un’illustrazione dei vari usi di !important e di come vengono applicati:

  • La dichiarazione !important sostituisce sempre quella senza (tranne in IE6 e precedenti):

     /* In a  
  • Se c'è più di una !important Dichiarazione !important in una regola con lo stesso livello di specificità, la successiva dichiarata vince:

     /* In a  
  • Se dichiari la stessa regola e la stessa proprietà in due posti diversi,! !important segue l'ordine a cascata se entrambe le dichiarazioni sono importanti:

     /* In an externally-linked stylesheet */ #id { color: red !important; } /* In a  
  • Per il seguente codice HTML:

     Text 

    Se hai due regole diverse e una !important :

     #id { color: red; } .class { color: blue !important; } 

    Quello !important vince sempre.

    Ma quando ne hai più di uno !important :

     #id { color: red !important; } .class { color: blue !important; } 

    La regola #id ha un selettore più specifico, in modo che uno vince.

Il modo in cui penso a questo è questo:

  1. !important è una carta picche . Supera tutti i punti di specificità. Alla tua domanda specifica, l’ !important sostituirà un id / classi di bazillion.

  2. !important ripristina la cascata. Quindi, se si utilizza un !important sotto un altro !important , le regole di seconda istanza.

C’è una risposta più tecnica là fuori, ma è così che penso !important .

Un’altra nota, se stai usando !important è necessario fare un passo indietro e controllare se stai facendo qualcosa di sbagliato. !important implica che stai lavorando contro la cascata di CSS. È necessario utilizzare !important in rari casi.