CSS-specifikitet

Vad är specifikitet?

Om det finns två eller fler konflikter CSS-regler som pekar på samma element, kommer webbläsaren att följa vissa principer för att bestämma vilken som är mest specifik och därmed segrande.

Att betrakta specifikiteten (specificity) som en poäng/klassificering, kan avgöra vilka styladeklarer som tillämpas på elementet.

Den universella selektorn (* har lägre specifikitet, medan ID-selektorn har hög specifikitet!

Observera:Denna specifikitet är en vanlig orsak till att CSS-regler inte gäller för vissa element, även om du kanske tror att de bör göra det.

Specifikitetshierarki

Varje valare har en plats i specifikitetshierarkin. Följande fyra kategorier definierar valares specifikitetsnivå:

Inline stil - Inline (inline) stil läggs direkt till det element som ska stylas. Exempel: <h1 style="color: #ffffff;">.

ID - ID är en unik identifierare för sidorelement, till exempel #navbar.

Klass, egenskap och pseudoklass - Denna kategori inkluderar .classes, [attributes] och pseudoklasser, till exempel :hover, :focus osv.

Element och pseudoelement - Denna kategori inkluderar elementnamn och pseudoelement, till exempel h1, div, :before och :after.

Hur räknar man specifikitet?

Kom ihåg att räkna specifikiteten!

Börja med 0, lägg till 1000 för style-attribut, 100 för varje ID, 10 för varje egenskap, klass eller pseudoklass, och 1 för varje elementnamn eller pseudoelement.

Tänk på följande tre kodsegment:

Exempel

A: h1
B: #content h1
C: <div id="content"><h1 style="color: #ffffff">Rubrik</h1></div>
  • A:s specifikitet är 1 (ett element)
  • B:s specifikitet är 101 (en ID-referens och ett element)
  • C:s specifikitet är 1000 (inline stil)

Eftersom 1 < 101 < 1000 har tredje regeln (C) högre specifikitet och kommer därför att tillämpas.

Specifikitetsregler 1:

När specifikiteten är densamma: den senaste regeln är viktig - Om samma regel skrivs två gånger i den externa stilarket, kommer den sista regeln att vara närmare det element som ska stylas och kommer därför att tillämpas:

Exempel

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

Prova själv

Nästa regel tillämpas alltid.

Specifikitetsregler 2:

ID-valare har högre specifikitet än egenskapsvalare - Se följande tre rader kod:

Exempel

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

Prova själv

Första regeln är mer specifik än de andra två, så den kommer att tillämpas.

Specifikitetsregler 3:

Innehållsvalare är mer specifika än enkel elementvalare - Inkluderade stylar är närmare de element som de ska styla. Så i följande fall:

Exempel

Från extern CSS-fil:

#content h1 {background-color: red;}

I HTML-filen:

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

Används efterföljande regel.

Specifikitetsregler 4:

Klassvaljare kommer att besegra ett obegränsat antal elementvaljare - Klassvaljare (t.ex. .intro kommer att besegra h1, p, div och liknande):

Exempel

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

Prova själv

Dessutom,Allmänna väljare och de värden som ärver har 0 - Specifikiteten för * är 0, body * och liknande har 0 specifikitet. Specifikiteten för de värden som är ärver är också 0.