Jos on olemassa kaksi tai useampi CSS-sääntö, jotka viittaavat samaan elementti, valitsin, jolla on suurin spesifisyysarvo "voittaa" ja sen tyylimäärittelyä sovelletaan kyseiseen HTML-elementtiin.
Ajattele spesifisyyttä arvosanana/sijoituksena, joka määrittää, mikä tyylin ilmoitus sovelletaan lopulta elementtiin.
Katso seuraavat esimerkit:
Tässä esimerkissä olemme käyttäneet "p"-elementtiä valitsimena ja määrittäneet punaisen värin tälle elementille. Tekstistä tulee punainen:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Katso nyt esimerkkiä 2:
Tässä esimerkissä olemme lisänneet luokan valitsimen (nimeltään "testi") ja määritetty vihreä väri tälle luokalle. Teksti on nyt vihreä (vaikka olemme määrittäneet punainen elementtivalitsimen väri "p"). Tämä johtuu siitä, että luokan valitsin on annettu korkeampi prioriteetti:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>Kokeile itse →
<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Katso nyt esimerkkiä 3:
Tässä esimerkissä olemme lisänneet id-valitsimen (nimeltään "demo"). Teksti tulee nyt olemaan sininen, koska id-valitsimella on korkeampi prioriteetti:
<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>Kokeile itse →
<!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>
Katso nyt esimerkkiä 4:
Tässä esimerkissä olemme lisänneet "p"-elementille rivin tyylin. The tekstistä tulee nyt vaaleanpunainen, koska tekstin sisäinen tyyli on etusijalla:
<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>Kokeile itse →
<!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>
Jokaisella CSS-valitsimella on paikkansa spesifisyyshierarkiassa.
On neljä luokkaa, jotka määrittelevät valitsimen spesifisyystason:
1. Sisäiset tyylit - Esimerkki:
<h1 style="color: pink;">2. tunnukset - Esimerkki:
#navbar3. Luokat, näennäisluokat, attribuuttien valitsimet - Esimerkki:
.test, :hover, [href]4. Elementit ja pseudoelementit - Esimerkki:
h1, ::beforeMuista kuinka spesifisyys lasketaan!
Aloita 0:sta, lisää 100 jokaiselle tunnusarvolle, lisää 10 jokaiselle luokan arvo (tai pseudoluokan tai attribuutin valitsin), lisää 1 jokaiselle elementin valitsimelle tai pseudoelementille.
Huomaa: Upotettu tyyli saa tarkkuuden arvon 1000 ja on aina etusijalla!
Huomautus 2: On yksi poikkeus tähän sääntöön: jos käytät !important-koodia sääntö, se jopa ohittaa rivin tyylit!
Alla olevassa taulukossa on esimerkkejä spesifisyysarvojen laskemisesta:
| 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) |
Valitsija, jolla on suurin tarkkuusarvo, voittaa ja tulee voimaan!
Harkitse näitä kolmea koodinpätkää:
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>A:n spesifisyys on 1 (yhden elementin valitsin)
B:n spesifisyys on 101 (yksi tunnusviittaus + yksi elementin valitsin)
C:n spesifisyys on 1000 (inline tyyli)
Koska kolmannella säännöllä (C) on korkein spesifisyysarvo (1000), tällä tyylillä ilmoitusta sovelletaan.
Yhtä tarkkuutta: uusin sääntö voittaa - Jos sama sääntö kirjoitetaan kahdesti ulkoiseen tyylisivuun, niin uusin sääntö voittaa:
h1 {background-color: yellow;}
h1 {background-color: red;}Kokeile itse →
<!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-valitsimet ovat tarkempia kuin attribuuttivalitsijat - Katso seuraavat kolme koodiriviä:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}Kokeile itse →
<!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>
ensimmäinen sääntö on tarkempi kuin kaksi muuta, ja siksi sitä sovelletaan.
Kontekstikohtaiset valitsimet ovat tarkempia kuin yksittäinen elementti valitsin - Upotettu tyylisivu on lähempänä tyyliteltävää elementtiä. Joten sisällä seuraava tilanne
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>jälkimmäistä sääntöä sovelletaan.
Luokan valitsin voittaa minkä tahansa määrän elementtivalitsimia - luokan valitsin, kuten .intro, voittaa h1, p, div jne.:
.intro {background-color: yellow;}
h1 {background-color:
red;}Kokeile itse →
<!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>
Yleisen valitsimen (*) ja perittyjen arvojen spesifisyys on 0 - Yleisvalitsin (*) ja perityt arvot ohitetaan!