CSS La regola !importante
Cos'è !importante?
La !importantregola nei CSS viene utilizzata per aggiungere più importanza a una proprietà/valore rispetto al normale.
In effetti, se usi la !importantregola, sovrascriverà TUTTE le regole di stile precedenti per quella proprietà specifica su quell'elemento!
Vediamo un esempio:
Esempio
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Esempio spiegato
Nell'esempio sopra. tutti e tre i paragrafi avranno un colore di sfondo rosso, anche se il selettore ID e il selettore di classe hanno una specificità maggiore. La !importantregola ha la precedenza sulla
background-colorproprietà in entrambi i casi.
Importante A proposito di !importante
L'unico modo per sovrascrivere una !important
regola è includere un'altra !important
regola su una dichiarazione con la stessa (o maggiore) specificità nel codice sorgente - e qui inizia il problema! Questo rende il codice CSS confuso e il debug sarà difficile, specialmente se hai un foglio di stile di grandi dimensioni!
Qui abbiamo creato un semplice esempio. Non è molto chiaro, quando guardi il codice sorgente CSS, quale colore è considerato più importante:
Esempio
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Suggerimento: è bene conoscere la !important
regola, potresti vederla in alcuni codici sorgente CSS. Tuttavia, non usarlo a meno che non sia assolutamente necessario.
Forse uno o due usi equi di !important
Un modo per utilizzarlo !importantè se devi sovrascrivere uno stile che non può essere sovrascritto in nessun altro modo. Questo potrebbe accadere se stai lavorando su un Content Management System (CMS) e non puoi modificare il codice CSS. Quindi puoi impostare alcuni stili personalizzati per sovrascrivere alcuni degli stili CMS.
Un altro modo per utilizzarlo !importantè: supponi di volere un aspetto speciale per tutti i pulsanti di una pagina. Qui, i pulsanti hanno uno stile di sfondo grigio, testo bianco e alcuni spazi interni e bordi:
Esempio
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
L'aspetto di un pulsante a volte può cambiare se lo inseriamo all'interno di un altro elemento con una specificità maggiore e le proprietà entrano in conflitto. Ecco un esempio di questo:
Esempio
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Per "forzare" tutti i pulsanti ad avere lo stesso aspetto, non importa cosa, possiamo aggiungere la !important
regola alle proprietà del pulsante, in questo modo:
Esempio
.button {
background-color: #8c8c8c !important;
color: white
!important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}