Spesifisitet i CSS

CSS kan brukes på et hvilket som helst element på flere måter (inline, intern og ekstern). Hva om vi bruker stiler på samme element på forskjellige måter (ved hjelp av inline, ved hjelp av ID eller klasse osv.)? I et slikt tilfelle kommer CSS -spesifisitetsfenomenet i praksis, og det velger CSS -velgeren som har høyest spesifisitetsverdi. Begrepet spesifisitet er som operatørens forrang for programmeringsspråk.

Når vi ser på viktigheten av spesifisitet, demonstrerer denne guiden kort arbeid og bruk av spesifisitet i CSS.

1. Hvordan CSS -spesifisitet fungerer
2. Spesifisitetsverdi av CSS -velgere

Hvordan spesifisitet fungerer i CSS

Arbeidet med spesifisitet avhenger av CSS -velgerne eller typen CSS du bruker. Denne delen vurderer spesifisitetssammenligningen på følgende måter:

• Inline CSS, intern CSS og ekstern CSS
• CSS -velgere (ID, klasse, pseudoklasser, pseudoelementer osv.)

Stilarket kan være inline, internt eller eksternt, og følgende er spesifisitetsnivået til disse stilarkene.

Fra ligningen ovenfor konkluderes det med at den inline CSS har den høyeste spesifisiteten sammenlignet med den interne og eksterne CSS.

La oss nå utforske hvordan stiler blir plukket ut hvis det er flere CSS -velgere brukes til samme element. Spesifisiteten til forskjellige CSS -velgere er definert av følgende ligning.

Til nå er den teoretiske sammenligningen blitt trukket tilbake. La oss ha en viss kvantitativ sammenligning av spesifisitetsscore, og denne spesifisitetspoengene beregnes av nettleserne på følgende måte.

For å gjøre det brukes de, titalls, hundrevis og tusenvis av telling på CSS -velgerne for å få en spesifikk verdi. Slik at den minst spesifikke velgeren (elementet) er tildelt 1 og den høyeste spesifisitetsvelgeren (inline) er tildelt 1000. Følgende tabell refererer til spesifisitetsscore for forskjellige CSS -velgere.

Vi har praktisert noen få eksempler som blir trukket ut av konseptet som er gitt i tabellen ovenfor.

Ved hjelp av informasjonen som er gitt i tabellene ovenfor, ville du bedre forstått begrepet spesifisitet i CSS. La oss bane dem ved å bruke følgende eksempler

Eksempel 1: Bruke flere CSS -velgere for ett element

Dette eksemplet praktiserer forskjellige CSS -velgere for å style “P” -elementet.

Html

Bruke spesifisitetskonseptet

I ovennevnte HTML -kode er avsnittet tildelt id = ”én” og klasse = ”spesifikasjon”.

CSS

I ovennevnte CSS, “Klasse”, “ID” og “Element” brukes som CSS -velgere for “P”. Hver CSS -velger har til hensikt å endre bakgrunnsfargen på “P” element.

Produksjon

Fra utgangen observeres det at bakgrunnsfargen er himmelblå som ble satt av id = ”en” av elementet “P”.

Eksempel 2: Bruke velgere av samme spesifisitet

Det er mulighet for at et element blir kontaktet av CSS -velgere som har samme spesifisitetspoeng. I et slikt tilfelle blir forekomsten av CSS -velgeren vurdert, og den senere velgeren er valgt for styling.

Dette eksemplet demonstrerer det samme scenariet ved å bruke følgende kode.

Html

Bruke velgerne som har samme spesifisitet

CSS

I ovennevnte CSS -kode brukes to ID -velgere med forskjellige stiler. #Spec som forekommer tidligere har bare bakgrunnsfargeegenskaper mens #Spec forekommer senere har flere CSS -egenskaper.

Produksjon

Fra utgangen observeres det at id = ”spesifikasjon” Valg som forekommer sideveis er valgt og egenskapene som er inneholdt av den, brukes på avsnittselementet.

Konklusjon

Hver gang flere CSS -velgere prøver å påvirke et element, bestemmer spesifisitetsfenomenet hvilken stil som skal brukes. Spesifisiteten i CSS har nøkkelrollen som komplekse stilark kan inneholde flere velgere for hvert element. Denne artikkelen demonstrerer begrepet spesifisitet i CSS. Dessuten vil du også bli kjent. Ved hjelp av dette vil du kunne beregne spesifisitetspoeng før du bruker en CSS -velger.