Ha két vagy több CSS-szabály van, amely ugyanarra mutat elemet, akkor a legmagasabb specifitás értékű szelektor "nyer", és annak stílusdeklarációt alkalmazunk az adott HTML-elemre.
Tekintsd a specifikusságot úgy, mint egy pontszámot/rangsort, amely meghatározza, hogy melyik stílus deklarációja végül egy elemre vonatkozik.
Tekintse meg a következő példákat:
Ebben a példában a "p" elemet használtuk választóként, és piros színt adtunk meg ehhez az elemhez. A szöveg piros lesz:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Most nézze meg a 2. példát:
Ebben a példában hozzáadtunk egy osztályválasztót ("teszt" néven), és zöldet adott meg szín ehhez az osztályhoz. A szöveg most zöld lesz (annak ellenére, hogy megadtuk egy piros színe az elemválasztóhoz "p"). Ez azért van, mert az osztályválasztó adott magasabb prioritású:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Most nézze meg a 3. példát:
Ebben a példában hozzáadtuk az azonosító választót ("demo" néven). A szöveg most az lesz kék, mert az azonosító választó magasabb prioritást kap:
<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>Próbálja ki Ön is →
<!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>
Most nézzük meg a 4. példát:
Ebben a példában egy soron belüli stílust adtunk hozzá a "p" elemhez. A A szöveg most rózsaszín lesz, mert a szövegközi stílus kap a legnagyobb prioritást:
<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>Próbálja ki Ön is →
<!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>
Minden CSS-választónak megvan a maga helye a specifikussági hierarchiában.
Négy kategória határozza meg a szelektor specifikussági szintjét:
1. Beépített stílusok - Példa:
<h1 style="color: pink;">
2. azonosítók - Példa:
#navbar
3. Osztályok, pszeudoosztályok, attribútumválasztók - Példa:
.test, :hover, [href]
4. Elemek és pszeudoelemek - Példa:
h1, ::before
Jegyezze meg, hogyan kell kiszámítani a fajlagosságot!
Kezdje 0-val, adjon hozzá 100-at minden azonosító értékhez, és adjon hozzá 10-et mindegyikhez osztályérték (vagy pszeudoosztály vagy attribútumválasztó), adjunk hozzá 1-et minden elemválasztóhoz vagy pszeudoelemhez.
Megjegyzés: A soron belüli stílus 1000-es specifikációs értéket kap, és így van mindig a legmagasabb prioritást kapjuk!
2. megjegyzés: Van egy kivétel ez alól a szabály alól: ha a !important kódot használja szabály, még a beépített stílusokat is felülírja!
Az alábbi táblázat néhány példát mutat be a specifitásértékek kiszámítására:
| 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) |
A legmagasabb specifitási értékkel rendelkező választó nyer és lép életbe!
Tekintsük ezt a három kódrészletet:
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>A specificitása 1 (egy elem választó)
B specificitása az 101 (egy azonosító hivatkozás + egy elem választó)
A C specifikációja 1000 (beépített stílus)
Mivel a harmadik szabály (C) rendelkezik a legmagasabb specificitási értékkel (1000), ez a stílus nyilatkozat kerül alkalmazásra.
Egyenlő konkrétság: a legújabb szabály nyer - Ha ugyanaz a szabály kétszer van beírva a külső stíluslapba, akkor a legújabb szabály nyer:
h1 {background-color: yellow;}
h1 {background-color: red;}Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
h1 {background-color: yellow;}
h1 {background-color: red;}
</style>
</head>
<body>
<h1>This is heading 1</h1>
</body>
</html>
Az azonosítóválasztók pontosabbak, mint az attribútumválasztók - Nézze meg a következő három kódsort:
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}Próbálja ki Ön is →
<!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>
az első szabály konkrétabb, mint a másik kettő, ezért alkalmazni kell.
A kontextus választói specifikusabbak, mint egyetlen elem választó - A beágyazott stíluslap közelebb van a stílusozandó elemhez. Tehát a következő helyzetet
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>az utóbbi szabályt kell alkalmazni.
Az osztályválasztó tetszőleges számú elemválasztót legyőz - az osztályválasztó, például az .intro, legyőzi a h1, p, div stb.
.intro {background-color: yellow;}
h1 {background-color:
red;}Próbálja ki Ön is →
<!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>
Az univerzális választó (*) és az örökölt értékek specifitása 0 - Az univerzális választó (*) és az öröklött értékek figyelmen kívül maradnak!