Om det finns två eller flera CSS-regler som pekar på detsamma element, kommer väljaren med det högsta specificitetsvärdet att "vinna", och dess stildeklaration kommer att tillämpas på det HTML-elementet.
Tänk på specificitet som en poäng/ranking som avgör vilken stildeklaration appliceras slutligen på ett element.
Titta på följande exempel:
I det här exemplet har vi använt elementet "p" som väljare och angett en röd färg för detta element. Texten blir röd:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Titta nu på exempel 2:
I det här exemplet har vi lagt till en klassväljare (som kallas "test"), och angav en green färg för denna klass. Texten blir nu grön (även om vi har angett en röd färg för elementväljaren "p"). Detta beror på att klassväljaren är given högre prioritet:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Titta nu på exempel 3:
I det här exemplet har vi lagt till id-väljaren (som heter "demo"). Texten blir nu blå, eftersom id-väljaren ges högre prioritet:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello
World!</p>
</body>
</html>
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test">Hello World!</p>
</body>
</html>
Titta nu på exempel 4:
I det här exemplet har vi lagt till en inline-stil för "p"-elementet. De texten kommer nu att vara rosa, eftersom den infogade stilen ges högsta prioritet:
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test"
style="color: pink;">Hello World!</p>
</body>
</html>
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
#demo {color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p id="demo" class="test" style="color: pink;">Hello World!</p>
</body>
</html>
Varje CSS-väljare har sin plats i specificitetshierarkin.
Det finns fyra kategorier som definierar specificitetsnivån för en väljare:
1. Inbäddade stilar - Exempel:
<h1 style="color: pink;">
2. ID - Exempel:
#navbar
3. Klasser, pseudoklasser, attributväljare - Exempel:
.test, :hover, [href]
4. Element och pseudo-element - Exempel:
h1, ::before
Memorera hur man beräknar specificitet!
Börja vid 0, lägg till 100 för varje ID-värde, lägg till 10 för varje klassvärde (eller pseudoklass- eller attributväljare), lägg till 1 för varje elementväljare eller pseudo-element.
Obs! Inline stil får ett specificitetsvärde på 1000 och är alltid högsta prioritet!
Obs 2: Det finns en undantag från denna regel: om du använder !important
regel, det kommer till och med att åsidosätta inline-stilar!
Tabellen nedan visar några exempel på hur man beräknar specificitetsvärden:
Selector | Specificity Value | Calculation |
---|---|---|
p | 1 | 1 |
p.test | 11 | 1 + 10 |
p#demo | 101 | 1 + 100 |
<p style="color: pink;"> | 1000 | 1000 |
#demo | 100 | 100 |
.test | 10 | 10 |
p.test1.test2 | 21 | 1 + 10 + 10 |
#navbar p#demo | 201 | 100 + 1 + 100 |
* | 0 | 0 (the universal selector is ignored) |
Väljaren med det högsta specificitetsvärdet vinner och träder i kraft!
Tänk på dessa tre kodfragment:
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
Specificiteten för A är 1 (ett elementväljare)
Specificiteten för B är 101 (en ID-referens + en elementväljare)
Specificiteten för C är 1000 (inline-styling)
Eftersom den tredje regeln (C) har det högsta specificitetsvärdet (1000), är denna stil deklarationen kommer att tillämpas.
Lika specificitet: den senaste regeln vinner - Om samma regel skrivs två gånger i den externa stilmallen, då den senaste regeln vinner:
h1 {background-color: yellow;}
h1 {background-color: red;}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
ID-väljare har en högre specificitet än attributväljare - Titta på följande tre kodrader:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
</style>
</head>
<body>
<div id="a">This is a div</div>
</body>
</html>
den första regeln är mer specifik än de andra två och kommer därför att tillämpas.
Kontextväljare är mer specifika än ett enskilt element väljare - Den inbäddade formatmallen är närmare det element som ska formateras. Så i följande situation
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
den senare regeln kommer att tillämpas.
En klassväljare slår valfritt antal elementväljare - en klassväljare som .intro slår h1, p, div, etc:
.intro {background-color: yellow;}
h1 {background-color:
red;}
Prova själv →
<!DOCTYPE html>
<html>
<head>
<style>
.intro {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1 class="intro">This is a heading</h1>
</body>
</html>
Den universella väljaren (*) och ärvda värden har en specificitet på 0 - Den universella väljaren (*) och ärvda värden ignoreras!