Hva er rekkefølgen på forrang for CSS?
Eiendommen som har høyere forrang blir utført før den med lavere forrang. Så det er en liste der CSS -egenskaper er rangert på grunnlag av deres forrang.
CSS -egenskaper rangert fra høyeste til laveste forrang
Presedensen til CSS -elementene fra høyere til lavere rangering i orden er som følger:
- De !viktig eiendom
- CSS -egenskap satt direkte på elementet
- Kombinerte velgere
- ID -velger
- Klassevelger
- Attributtvelger
- Elementvelger
- *
- Arvelige stiler
En kort beskrivelse av hver eiendom
La oss diskutere disse CSS -egenskapene og elementene i detalj i størrelsesorden deres forrang.
De !Viktig regel
Det er en "!viktig”Regel i CSS at hvis det eksisterer utført før alle de andre CSS -egenskapene. Den erklærer en spesifikk egenskap som for den høyeste forrang eller instruerer kompilatoren om å prioritere en bestemt egenskap mens han utfører koden. Eiendommen som inneholder “!viktig”Regel vil ha den høyeste forrang blant alle de andre reglene.
Eiendommen som har “!viktig”Regel dominerer over de andre egenskapene. Faktisk "!viktig”Regel overstyrer viktigheten av de andre egenskapene.
La oss skrive et kodebit for å forstå virkningen av dette “!viktig”Regel i et dokument. Her er et HTML -kodebit som setter inn tre enkle setninger i utdataene:
Dette er linjen 1
Dette er linjen 2
Dette er linjen 3
Vi legger til tre CSS -stilegenskaper i for å sette forskjellige bakgrunnsfarger for hver:
.MyClass bakgrunnsfarge: rød;#Myid bakgrunnsfarge: grønn;
P bakgrunnsfarge: gul !viktig;
Kodebiten ser ut som om den vil stille inn de tre forskjellige bakgrunnsfargene for hver, men "!viktig”Regel som er satt inn for egenskapen som setter bakgrunnsfargen Yellow dominerer over alle de andre egenskapene, og utgangsgrensesnittet vil være følgende:
Noen ganger “!viktig”Eiendom fungerer ikke ordentlig på grunn av flere“!viktig”Regler for samme type eiendom.
CSS -egenskapene utføres på grunnlag av deres forrang. Etter "!viktig”Regel, alle egenskapene utføres i henhold til deres erklærte forrang.
CSS -egenskap satt direkte på elementet
Når det er en CSS -egenskap som er satt direkte på et element i CSS -stilelementet, vil den ha den høyeste forrang sammenlignet med alle de andre egenskapene.
Kombinerte velgere
Disse har mindre spesifisitet og betydning enn de direkte elementet velgerne, men større spesifisitet enn andre egenskaper i.E ID -velger, klasseleser og attributtvelger.
ID -velger
Den har høyere spesifisitet enn klasse og attributt -velgere og lavere enn kombinerte utvalgere.
Klassevelger
Det har lavere forrang enn ID -velgeren og høyere forrang enn noen andre egenskaper som attributt og elementvelger.
Attributtvelger
En attributt har forrang høyere enn elementvelgeren og lavere forrang enn klasselektoren.
Elementvelger
Element Selectors har forrang mindre enn attributtet, klassen og ID -velgerne.
All -velgeren ( *)
Det har den laveste forrang blant alle velgerne i CSS -stilelementet.
Arvelige stiler
Siden de arvelige stilene refererer til foreldrene og ikke det eksakte målrettede elementet, har det den laveste forrang i listen over alle stilegenskapene i CSS.
Forklart ovenfor er listen over rekkefølgen på forrang for CSS -stilelementene.
Konklusjon
Som alle de andre kodingsspråkene har CSS også en rekkefølge av forrang som operasjonene utføres. Mens du legger til CSS -egenskaper i et hvilket som helst dokument, må nettleseren fjerne konflikten som eiendommen skal utføres før den andre og hvilken egenskap fullstendig overstyrer de andre egenskapene. Så nettleseren må utføre koden i henhold til rekkefølgen av CSS.