CSS Specificity

Wat is specifieke waarde?

Als er twee of meer conflictende CSS-regels naar hetzelfde element gericht zijn, zal de browser enkele principes volgen om te bepalen welke het meest specifiek is en daardoor wint.

Zie specifieke waarde (specificity) als een score/graad en je kunt bepalen welke stijlverklaringen uiteindelijk worden toegepast op een element.

De algemene selector (* heeft een lagere specifieke waarde, terwijl de ID selector een hogere specifieke waarde heeft!

Let op:Deze specifieke eigenschap is een veelvoorkomende reden waarom CSS-regels niet van toepassing zijn op bepaalde elementen, hoewel je zou kunnen denken dat ze dat zouden moeten zijn.

Specifiteitshierarchie

Elke kiesner heeft een positie in de specifiteitshierarchie. De volgende vier categorieën definiëren het specifiteitniveau van kiesners:

Inline stijlen - Inline (inline) stijlen worden direct toegevoegd aan het element dat gestileerd moet worden. Voorbeeld: <h1 style="kleur: #ffffff;">.

ID - ID is de unieke identifier van een pagina-element, bijvoorbeeld #navbar.

Klassen, eigenschappen en pseudo-klassen - Deze categorie omvat .classes, [attributes] en pseudo-klassen, zoals :hover, :focus, enz.

Elementen en pseudo-elementen - Deze categorie omvat elementnamen en pseudo-elementen, zoals h1, div, :before en :after.

Hoe specifiteit te berekenen?

Onthoud a.u.b. de methode om specifiteit te berekenen!

Vanaf 0, voeg 1000 toe aan style-eigenschap, voeg 100 toe aan elke ID, voeg 10 toe aan elke eigenschap, klasse of pseudo-klasse, en voeg 1 toe aan elke elementnaam of pseudo-element.

Denk na over de volgende drie codefragmenten:

Voorbeeld

A: h1
B: #content h1
C: <div id="content"><h1 style="kleur: #ffffff">Koptekst</h1></div>
  • De specifiteit van A is 1 (een element)
  • De specifiteit van B is 101 (een ID-verwijzing en een element)
  • De specifiteit van C is 1000 (inline stijl)

Omdat 1 < 101 < 1000, heeft de derde regel (C) een hogere specifiteit en wordt deze toegepast.

Specifiteit regel 1:

Bij gelijke specifiteit is de nieuwste regel belangrijk - Als dezelfde regel tweemaal in het externe stijlbestand wordt ingeschreven, is de regel in het stijlbestand dichter bij het element dat gestileerd moet worden, dus deze wordt toegepast:

Voorbeeld

h1 {achtergrondkleur: geel;}
h1 {achtergrondkleur: rood;}

Probeer het zelf

De volgende regel is altijd van toepassing.

Specifiteit regel 2:

ID-kiesners hebben een hogere specifiteit dan eigenschapskiesners - Bekijk de volgende drie regels code:

Voorbeeld

div#a {achtergrondkleur: groen;}
#a {achtergrondkleur: geel;}
div[id=a] {achtergrondkleur: blauw;}

Probeer het zelf

De eerste regel is specifieker dan de andere twee, dus deze wordt toegepast.

Specifiteit regel 3:

Contextuele kiesners zijn specifieker dan een enkele elementkiesner - Ingebedde stijlbladen zijn dichter bij het element dat gestileerd moet worden. Dus in de volgende gevallen:

Voorbeeld

Komen van externe CSS-bestand:

#content h1 {achtergrondkleur: rood;}

In HTML-bestanden:

<style>
#content h1 {
  achtergrondkleur: geel;
}
</style>

De volgende regel wordt toegepast.

Specifiekeiteit regel 4:

Klassieke selectors zullen een oneindige hoeveelheid element selectors verslaan - Klassieke selectors (zoals .intro zullen h1, p, div etc. verslaan):

Voorbeeld

.intro {achtergrondkleur: geel;}
h1 {achtergrondkleur: rood;}

Probeer het zelf

DaarnaastAlgemene selectors en geërfde waarden hebben 0 specifiekeiteit - De specifiekeiteit van * en body *, en vergelijkbare eigenschappen hebben 0 specifiekeiteit. De specifiekeiteit van geërfde waarden is ook 0.