Regola !important CSS
- Pagina precedente Specificità CSS
- Pagina successiva Funzione matematica CSS
Cos'è !important?
CSS !important La regola per assegnare una priorità più alta rispetto allo stile normale per l'attributo/valore.
In realtà, se hai usato !important La regola, che copre tutte le precedenti regole di stile per l'attributo specifico dell'elemento!
Guardiamo un esempio:
Esempio
#myid {
background-color: blue;
}
.myclass {
background-color: gray;
}
p {
background-color: red !important;
}
Esempio di spiegazione
Negli esempi precedenti, tutti e tre i paragrafi avranno un colore di sfondo rosso, nonostante il selettore ID e classe abbia una specificità più alta.!important Le regole coprono entrambi i casi dell'attributo background-color.
Cosa c'è da sapere su !important
Sovrascrittura !important Il solo modo per sovrascrivere le regole è includere un'altra dichiarazione con la stessa (o maggiore) specificità nel codice sorgente !important Le regole - è qui che inizia il problema! Questo rende il codice CSS confuso e la debug becomesce più difficile, specialmente se hai tabelle di stile grandi!
Ecco un esempio semplice. Quando guardi il codice sorgente CSS, non è chiaro quale colore viene considerato più importante:
Esempio
#myid {
background-color: blue !important;
}
.myclass {
background-color: gray !important;
}
p {
background-color: red !important;
}
Suggerimento:Conoscere !important Le regole sono buone. Potresti vederlo nei sorgenti CSS. Ma a meno che non sia assolutamente necessario, non usarlo.
Ci potrebbero essere uno o due casi ragionevoli di utilizzo di !important
Un altro modo di usare !important Il caso è, se devi sovrascrivere uno stile che non puoi sovrascrivere in altro modo. Questo potrebbe essere perché stai usando un sistema di gestione dei contenuti (CMS) e non puoi editare il codice CSS. Poi puoi impostare alcuni stili personalizzati per sovrascrivere alcuni stili CMS.
Un altro modo di usare !important Il caso è questo: supponiamo che tu voglia che tutti i pulsanti sulla pagina abbiano un aspetto speciale. Qui, lo stile del pulsante è di colore di sfondo grigio, testo bianco e alcune margini interne e bordi:
Esempio
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
Se mettiamo il pulsante in un altro elemento con una specificità più alta, l'aspetto del pulsante potrebbe cambiare e ci potrebbero essere conflitti tra le proprietà. Ecco un esempio:
Esempio
.button {
background-color: #8c8c8c;
color: white;
padding: 5px;
border: 1px solid black;
}
#myDiv a {
color: red;
background-color: yellow;
}
Per “obbligare” tutti i pulsanti a avere lo stesso aspetto in qualsiasi momento, possiamo impostare !important Aggiungi le regole alla proprietà del pulsante, come mostrato di seguito:
Esempio
.button {
background-color: #8c8c8c !important;
color: white !important;
padding: 5px !important;
border: 1px solid black !important;
}
#myDiv a {
color: red;
background-color: yellow;
}
- Pagina precedente Specificità CSS
- Pagina successiva Funzione matematica CSS
