!Importante regola in CSS ha spiegato

Le proprietà CSS sono applicate in un ordine definito utilizzando il concetto di specificità in CSS. Tuttavia, a volte potrebbe essere necessario dare importanza al valore delle proprietà CSS rispetto agli altri valori della stessa proprietà. Per questo, il !La parola chiave importante viene utilizzata con una proprietà CSS per renderla più importante di altre proprietà. Questo articolo dimostra l'uso del !Regola importante in CSS.

Come !La regola importante funziona in CSS

Per capire il lavoro, devi avere una comprensione della sintassi seguita da !Regola importante.

selettore Proprietà: valore !importante;

IL selettore si riferisce al selettore CSS utilizzato mentre il proprietà si riferisce alla proprietà CSS applicata con alcuni valore. Il posizionamento del !Anche la parola chiave importante è importante e deve essere alla fine del valore della proprietà come mostrato nella sintassi.

Come usare !Regola importante in CSS

Come il !La regola importante non segue la specificità; Quindi non importa dove il !Viene applicata una regola importante che si erge solo al massimo livello di specificità. Abbiamo alcuni esempi per ottenere un quadro più chiaro di questo fenomeno.

Esempio 1: utilizzando CSS esterno, interno e in linea

Di solito, il CSS in linea ha la massima priorità seguita da CSS interni ed esterni. Il seguente codice utilizza il !Regola importante in un foglio di stile esterno per mostrare il suo comportamento prevalente.

Html

Benvenuti in Linuxhint!

Nel codice sopra, un

L'elemento viene utilizzato con lo stile in linea che intende cambiare il colore di sfondo.

CSS esterno

H3
Background-color: Lightgreen !importante;
imbottitura: 5px;
Bordo: solido sottile;
larghezza: 50%;

Il codice di cui sopra si riferisce al foglio di stile esterno che sarebbe collegato al documento HTML. Si osserva che la proprietà di background ha un !importante governare con esso.

CSS interno

H3 background-color: skyblue;

Il codice CSS sopra è stato usato come CSS interno; Questo CSS interno cerca anche di cambiare il colore di sfondo del

elemento.

Produzione

Sebbene la linea abbia una priorità più elevata rispetto a quella interna ed esterna. Tuttavia, abbiamo usato il !Importante parola chiave con la proprietà in background in CSS esterno. Pertanto, il colore di fondo verrà recuperato dal file CSS esterno, come si può vedere dall'output sopra.

Esempio 2: utilizzando vari selettori CSS

Qui vengono utilizzati i selettori CSS come classe e ID di un elemento. IL !Regola importante viene applicata all'interno della classe di un elemento.

Html

Benvenuti in Linuxhint!

Nel codice precedente viene creato un paragrafo con id = "para" e class = "cl".

CSS

IL ".selettore di cl "e"#parà"I selettori CSS tentano di impostare il colore di sfondo del

elemento. Notare che il !importante la regola viene applicata al ".cl"Selettore .

Produzione

Sebbene il selettore ID abbia una priorità più elevata rispetto al selettore di classe, il !importante La regola sovrascriverà la proprietà in background-color utilizzata in ID = "parà"Selettore.

Conclusione

IL !La regola importante è molto utile in vari scenari complessi in cui vengono utilizzati più fogli di stile esterno e interno e si desidera solo aggiungere un'altra proprietà CSS con la massima priorità. Mantenendo il significato del !Regola importante in mente, questo post fornisce una guida dettagliata sul lavoro e sull'uso del !Regola importante in CSS. L'uso del !Regola importante è illustrata esercitandolo su vari selettori CSS e osservando che sovrascrive la proprietà CSS pertinente utilizzata da altri selettori CSS.