Qual è l'ordine di precedenza per CSS?
La proprietà che ha la precedenza maggiore viene eseguita prima di quella con una precedenza inferiore. Quindi, c'è un elenco in cui le proprietà CSS sono classificate sulla base della loro precedenza.
Proprietà CSS classificate dalla più alta alla precedenza più bassa
La precedenza degli elementi CSS dal rango superiore a inferiore in ordine è la seguente:
- IL !Proprietà importante
- Proprietà CSS impostata direttamente sull'elemento
- Selettori combinati
- Selettore ID
- Selettore di classe
- Selettore attributo
- Selettore degli elementi
- *
- Stili ereditari
Una breve descrizione di ogni proprietà
Discutiamo in dettaglio queste proprietà e elementi CSS nell'ordine della loro precedenza.
IL !Regola importante
C'è un "!importante"Regola in CSS che se esiste viene eseguito prima di tutte le altre proprietà CSS. Dichiara una proprietà specifica come quella della massima precedenza o indica al compilatore di dare priorità a una determinata proprietà durante l'esecuzione del codice. La proprietà che contiene il “!importante"La regola avrà la massima precedenza tra tutte le altre regole.
La proprietà che ha il “!importante"La regola domina sulle altre proprietà. In effetti, il "!importante"La regola prevale sull'importanza delle altre proprietà.
Scriviamo un frammento di codice per comprendere l'impatto di questo "!importante"Regola in un documento. Ecco un frammento di codice HTML che inserisce tre semplici frasi nell'output:
Questa è la linea 1
Questa è la linea 2
Questa è la riga 3
Aggiungiamo tre proprietà in stile CSS in per impostare diversi colori di sfondo per ciascuno:
.myclass background-color: rosso;#myid background-color: verde;
p sfondo: giallo !importante;
Lo snippet di codice sembra che imposterà i tre diversi colori di sfondo per ciascuno ma il "!importante"La regola inserita per la proprietà che imposta il colore di sfondo giallo domina su tutte le altre proprietà e l'interfaccia di output sarà la seguente:
Tuttavia, a volte il "!importante"La proprietà non funziona correttamente a causa di più"!importante"Regole per lo stesso tipo di proprietà.
Le proprietà CSS sono eseguite sulla base della loro precedenza. Dopo il "!importante"Regola, tutte le proprietà eseguono in base alla loro precedenza dichiarata.
Proprietà CSS impostata direttamente sull'elemento
Quando esiste una proprietà CSS impostata direttamente su un elemento nell'elemento in stile CSS, avrà la massima precedenza rispetto a tutte le altre proprietà.
Selettori combinati
Questi hanno meno specificità e importanza rispetto ai selettori di elementi diretti ma maggiore specificità rispetto ad altre proprietà i.Selettore e ID Selettore, selettore di classi e attributo.
Selettore ID
Ha una specificità più elevata rispetto ai selettori di classe e attributi e più bassi rispetto ai selettori combinati.
Selettore di classe
Ha una precedenza inferiore rispetto al selettore ID e una precedenza superiore rispetto ad alcune altre proprietà come attributo ed elemento selettore.
Selettore attributo
Un attributo ha una precedenza superiore a quella del selettore degli elementi e una precedenza inferiore a quella del selettore di classe.
Selettore degli elementi
I selettori di elementi hanno una precedenza inferiore agli attributi, alla classe e ai selettori ID.
All Selector ( *)
Ha la precedenza più bassa tra tutti i selettori nell'elemento in stile CSS.
Stili ereditari
Poiché gli stili ereditari si riferiscono al genitore e non all'elemento mirato esatto stesso, ha la precedenza più bassa nell'elenco di tutte le proprietà di stile in CSS.
Spiegato sopra è l'elenco dell'ordine di precedenza degli elementi in stile CSS.
Conclusione
Come tutte le altre lingue di codifica, CSS ha anche un ordine di precedenza in base al quale vengono eseguite le operazioni. Mentre aggiunge le proprietà CSS in qualsiasi documento, il browser deve eliminare il conflitto di quale proprietà dovrebbe essere eseguita davanti all'altra e quale proprietà sovrascrive completamente le altre proprietà. Quindi, il browser deve eseguire il codice in base all'ordine di precedenza di CSS.