CSS specifikitet

Hvad er specifikitet?

Hvis der er to eller flere konflikterende CSS-regler, der peger på det samme element, vil browseren følge nogle principper for at bestemme, hvilken der er mest specifik, og derfor sejre.

At betragte specifikiteten (specificity) som en score/kvalitet kan afgøre, hvilke stildeklarationer der til sidst anvendes på elementet.

Den universelle selektor (*) har lav specifikitet, mens ID-selektorer har høj specifikitet!

Bemærk:Denne specifikitet er en almindelig grund til, at CSS-regler ikke gælder for nogle elementer, selvom du måske tror, de burde gøre det.

Specifikkekskluderingshierarki

Hver valgfinder har en placering i specifikkekskluderingshierarkiet. Følgende fire kategorier definerer valgfinders specifikkekskluderingsniveau:

Inline stil - Inline (inline) stil tilføjes direkte til det element, der skal styles. Eksempel: <h1 style="color: #ffffff;">.

ID - ID er en unik identifikator for elementer på siden, for eksempel #navbar.

Klasser, egenskaber og pseudo-klasser - Denne kategori inkluderer .classes, [attributes] og pseudo-klasser, såsom :hover, :focus osv.

Elementer og pseudo-elementer - Denne kategori inkluderer elementnavne og pseudo-elementer, såsom h1, div, :before og :after.

Hvordan beregner man specifikitet?

Husk beregningsmetoden for specifikitet!

Begynd med 0, tilføj 1000 til style-attributten, 100 til hver ID, 10 til hver egenskab, klasse eller pseudo-klasse, og 1 til hver elementnavn eller pseudo-element.

Tænk over følgende tre kodefragmenter:

Eksempel

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Heading</h1></div>
  • A's specifikitet er 1 (et element)
  • B's specifikitet er 101 (en ID-reference og et element)
  • C's specifikitet er 1000 (inline stil)

Da 1 < 101 < 1000, har tredje regel (C) højere specifikitet og vil derfor blive anvendt.

Specifikkekskluderingsregler 1:

Ved samme specifikitet er den nyeste regel vigtig - Hvis samme regel skrives to gange i en ekstern stilark, vil den sidste regel være tættere på det element, der skal styles, og vil derfor blive anvendt:

Eksempel

h1 {background-color: yellow;}
h1 {background-color: red;}

Prøv det selv

Den næste regel anvendes altid.

Specifikkekskluderingsregler 2:

ID-valgfindere har højere specifikitet end egenskabsvalgfindere - Se nedenstående tre linjer kode:

Eksempel

div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}

Prøv det selv

Første regel er mere specifik end de to andre, og vil derfor blive anvendt.

Specifikkekskluderingsregler 3:

Contextuelle valgfindere er mere specifikke end enkelt-element valgfindere - Indlejrede stilark er tættere på de elementer, der skal styles. Så i følgende tilfælde:

Eksempel

Kommer fra ekstern CSS-fil:

#content h1 {background-color: red;}

I HTML-filen:

<style>
#content h1 {
  background-color: yellow;
}
</style>

vil anvende det næste regel.

Specifikkets regel 4:

Klassesøgere vil besejre et hvilket som helst antal elementvælgere - Klassesøger (som .intro vil besejre h1, p, div osv.):

Eksempel

.intro {background-color: yellow;}
h1 {background-color: red;}

Prøv det selv

Derudover,Generelle vælger og arvede værdier har en specifikkhed på 0 - *'s specifikkhed, body * og lignende har en specifikkhed på 0. Specifikken for arvede værdier er også 0.