Beregning af specificitet: inline style, ID, klasse, element
Beregn specificitetsscorer, og forudsig, hvilken regel der vinder ved enhver style-konflikt.
Beregning af specificitet: inline style, ID, klasse, element er en gratis CSS Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i CSS Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad er specificitet
Specificitet afgør, hvilken CSS-regel der vinder, når flere regler målretter det samme element og den samme egenskab. Den beregnes som et pointtal med 4 dele: (A, B, C, D), hvor A er højest, og D er lavest.
Specificitetens komponenter
De fire kolonner:
- A: Inline-stilarter (attributten style="") = 1,0,0,0
- B: ID-selektorer (#id) = 0,1,0,0
- C: Klasseselektorer (.class), attributselektorer og pseudoklasser = 0,0,1,0
- D: Type- (element-)selektorer og pseudoelementer = 0,0,0,1
Eksempler på specificitet
Beregning af specificitet:
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>Universalselektoren har ingen specificitet
Universalselektoren *, kombinatorer (+, >, ~, mellemrum) og pseudoklassen :where() bidrager alle med nul (0,0,0,0) til specificiteten.
Inline-stilarter vinder
Inline-stilarter (attributten style="") har den højeste specificitet (1,0,0,0). Kun !important kan tilsidesætte dem fra en regel i et stilark.
Sammenligning af specificitetspoint
Sammenlign fra venstre mod højre. Den første kolonne, hvor pointtallene er forskellige, afgør vinderen. (0,1,0,0) slår (0,0,99,99), fordi ID-kolonnen vinder med det samme.
Specificitet for :is(), :not() og :has()
:is(), :not() og :has() får specificiteten fra deres mest specifikke argument:
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>Specificitet for nth-child
:nth-child(), :first-child, :hover og andre pseudoklasser bidrager alle med (0,0,1,0) — specificitet på klasseniveau.
Specificitet for pseudoelementer
::before, ::after, ::first-line osv. bidrager med (0,0,0,1) — specificitet på elementniveau. De befinder sig i D-kolonnen.
Specificitet er ikke nedarvning
Specificitet beregnes pr. egenskab og pr. element. En regel med højere specificitet vinder for en given egenskab, men nedarvede værdier fra en forælder med høj specificitet slår ikke mere specifikke direkte regler på det underordnede element.
Værktøjer til beregning af specificitet
Brug onlineværktøjer som specificity.keegan.st eller browserens DevTools til at kontrollere specificiteten. I DevTools viser gennemstregede stilarter i panelet med stilarter, at en mere specifik regel vandt.
Hurtigt tjek
Hvilken selektor har den højeste specificitet: #sidebar .link eller .nav .nav-item .nav-link.active?
Opsummering
Specificitetspoint er (A, B, C, D): inline-stilarter, ID'er, klasser/attributter/pseudoklasser, elementer/pseudoelementer. Sammenlign fra venstre mod højre — den første forskellige kolonne vinder. :where() bidrager altid med nul. Ét ID slår et vilkårligt antal klasseselektorer. Brug panelet med stilarter i DevTools for at se, hvilke regler der vinder, og hvorfor.
Lær CSS med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 40
- Lektioner
- 159
Ofte stillede spørgsmål
Er lektionen “Beregning af specificitet: inline style, ID, klasse, element” gratis?
Ja — hele teksten til “Beregning af specificitet: inline style, ID, klasse, element” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af CSS Academy-kurset, skal du opgradere til CoddyKit PRO. CSS Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Beregning af specificitet: inline style, ID, klasse, element”?
Beregn specificitetsscorer, og forudsig, hvilken regel der vinder ved enhver style-konflikt. Du øver dig i CSS Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på CSS Academy?
Der kræves ingen tidligere erfaring. CSS Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 1 af 4.
Hvor lang tid tager lektionen “Beregning af specificitet: inline style, ID, klasse, element”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne CSS Academy-lektion?
Ja. Alle CSS Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.
Alle lektioner i dette kursus
- Beregning af specificitet: inline style, ID, klasse, element
- Cascaden: oprindelse og rækkefølge
- !important: hvornår og hvorfor ikke
- Nedarvning og all-egenskaben