Spesifisitetshierarki i CSS | Forklart

Spesifisitet i CSS bestemmer bestillingen av CSS -velgere som skal brukes på et element. For eksempel kan et element bli påvirket av forskjellige CSS -stiler, og dermed ville det være utfordrende å tilpasse seg en stil. Spesifisitetskonseptet har lettet prosessen med å bestemme hvilken CSS -egenskap som skal velges for et element. For å gjøre det følges et spesifisitetshierarki som definerer en rekkefølge av CSS -velgere i henhold til spesifisitetsscore.

Denne artikkelen gir en dyp innsikt i spesifisitetshierarkiet med følgende læringsutbytte:

1. Spesifisitetshierarki i CSS
2. Hvordan beregne spesifisitetshierarkiets poengsum

Spesifisitetshierarki i CSS

Spesifisitetshierarkiet er den viktigste ingrediensen i å praktisere spesifisitet. Spesifisitetshierarkiet refererer til kategoriene CSS -velgere og deres utførelsesrekkefølge i CSS. Følgende fire grupper refererer

Inline -stiler: Stilegenskapen som brukes inne i elementet og spesifisiteten til inline -stiler er større enn alle de andre gruppene.

Identifikator (ID): ID -attributtet til et element og spesifisiteten er ett trinn etter inline -stiler.

Klasser, pseudoklasser, attributter: Denne gruppen inneholder klasser, pseudoklasser (for eksempel: lenke,: aktiv ,: fokus) og andre attributter. Spesifisitetsnivået til denne gruppen er ett trinn ned fra identifikasjonsgruppen.

Elementer, pseudo -elementer: Denne gruppen inneholder elementer (p, h1, div) og pseudo elementer (:: før, :: etter) . Spesifisiteten til denne gruppen er på det laveste nivået.

Hvordan beregne spesifisitetshierarki -poengsum

Bak begrepet spesifisitetshierarki, eksisterer det en matematisk beregning som fører til å kvantifisere spesifisiteten og prioritere CSS -velgeren basert på den poengsummen. Poengsummen kan beregnes ved å følge målestokken nedenfor.

Eksempel 1: CSS -velgere

Følgende kode praktiserer forskjellige CSS -velgere på et enkelt element for å forstå spesifisitetshierarkiprosessen i CSS.

Html

Linuxhint! En valley av opplæringsprogrammer

CSS

I ovennevnte CSS -kode prøver tre velgere å endre bakgrunnsfargen på H3 -elementet. Den første velgeren bruker navnet på elementet, mens den andre og tredje utvalget utøver klassen og IDen til elementet H3.

Produksjon

Som spesifisiteten til id er større enn klasse og element, Dermed id ville bli brukt som en CSS -velger.

Eksempel 2: Bruke hybrid CSS -velgere

Det kan være en sak der du må definere klasser med de samme navnene. I et slikt scenario utøves hybridvelgerne for å identifisere et spesifikt element unikt. Følgende eksempel bruker ID og klasse For å lage en hybridvelger.

Html

Linuxhint! En valley av opplæringsprogrammer

Tutorials on HTML, CSS, Java, JQuery og JavaScript

Velkommen til Linuxhint

En leverandør av kvalitetsinnhold

I koden ovenfor, to Div's er opprettet og hver div har H3 med klasse = ”spesifikasjon” og P med klasse = ”Spec1". elementer.

CSS

I ovennevnte CSS, #New .Spesifikasjon refererer til H3 -elementet i div id = ”NY .Spesifikasjon refererer til alle elementer som har klasse = ”spesifikasjon”.

Husk beregningene, “#New”.spesifikasjon ”og“.spesifikasjon ” har følgende poengsum.

• #ny .spesifikasjon = 100+10 = 110
• .spesifikasjon = 10

Produksjon

Fra utgangen observeres det at CSS -velgeren “#DIV .spesifikasjon ” har blitt lastet ettersom spesifisiteten er større enn “.spesifikasjon ”.

Konklusjon

Spesifisitetshierarki setter bestillingen for CSS -velgere, velgeren med høyere spesifisitetspoeng har en høyere prioritet sammenlignet med velgeren som har lavere spesifisitetspoeng. I denne artikkelen har vi demonstrert begrepet spesifisitetshierarki og beskrevet det grunnleggende om hvordan spesifisitetshierarkiet er definert. Inline -stilene har høyest spesifisitetspoeng og blir dermed plassert øverst i spesifisitetshierarkietreet, etterfulgt av ID, klasser og element. Videre har vi også gitt metoden for å beregne spesifisitetsscore for CSS -velgere.