Specyfika CSS
Co to jest specyfika?
Jeśli istnieją dwie lub więcej reguł CSS, które wskazują na ten sam element, selektor z najwyższą wartością specyficzności „wygra”, a jego deklaracja stylu zostanie zastosowana do tego elementu HTML.
Pomyśl o konkretności jako o wyniku/rankingu, który określa, która deklaracja stylu zostanie ostatecznie zastosowana do elementu.
Spójrz na następujące przykłady:
Przykład 1
W tym przykładzie użyliśmy elementu „p” jako selektora i określiliśmy kolor czerwony dla tego elementu. Tekst będzie czerwony:
<html>
<head>
<style>
p {color: red;}
</style>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Spójrz teraz na przykład 2:
Przykład 2
W tym przykładzie dodaliśmy selektor klasy (o nazwie „test”) i określiliśmy zielony kolor dla tej klasy. Tekst będzie teraz zielony (mimo że określiliśmy czerwony kolor dla selektora elementu „p”). Dzieje się tak, ponieważ selektor klasy ma wyższy priorytet:
<html>
<head>
<style>
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test">Hello World!</p>
</body>
</html>
Spójrz teraz na przykład 3:
Przykład 3
W tym przykładzie dodaliśmy selektor id (o nazwie „demo”). Tekst będzie teraz niebieski, ponieważ selektor id ma wyższy priorytet:
<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>
Spójrz teraz na przykład 4:
Przykład 4
W tym przykładzie dodaliśmy styl wbudowany dla elementu „p”. Tekst będzie teraz różowy, ponieważ styl wbudowany ma najwyższy priorytet:
<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>
Hierarchia specyficzności
Każdy selektor CSS ma swoje miejsce w hierarchii specyfiki.
Istnieją cztery kategorie, które określają poziom szczegółowości selektora:
- Style wbudowane — przykład: <h1 style="color: pink;">
- Identyfikatory — przykład: #navbar
- Klasy, pseudoklasy, selektory atrybutów — Przykład: .test, :hover, [href]
- Elementy i pseudoelementy - Przykład: h1, :before
Jak obliczyć specyficzność?
Zapamiętaj, jak obliczyć specyficzność!
Zacznij od 0, dodaj 100 dla każdej wartości identyfikatora, dodaj 10 dla każdej wartości klasy (lub pseudoklasy lub selektora atrybutu), dodaj 1 dla każdego selektora elementu lub pseudoelementu.
Uwaga: Styl wbudowany ma wartość specyficzności 1000 i zawsze ma najwyższy priorytet!
Uwaga 2: Jest jeden wyjątek od tej reguły: jeśli użyjesz tej !important
reguły, zastąpi ona nawet style wbudowane!
Poniższa tabela przedstawia kilka przykładów obliczania wartości swoistości:
| 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) |
Selektor o najwyższej wartości specyficzności wygra i wejdzie w życie!
Rozważ te trzy fragmenty kodu:
Przykład
A: h1
B: h1#content
C: <h1 id="content" style="color:
pink;">Heading</h1>
Specyficzność A wynosi 1 (jeden selektor elementu)
Specyficzność B wynosi 101 (jedno odniesienie do identyfikatora + jeden selektor elementu)
Specyficzność C wynosi 1000 (stylizacja inline)
Ponieważ trzecia reguła (C) ma najwyższą wartość specyficzności (1000), zostanie zastosowana ta deklaracja stylu.
Więcej przykładów reguł dotyczących szczegółowości
Równa szczegółowość: wygrywa najnowsza reguła — jeśli ta sama reguła zostanie dwukrotnie zapisana w zewnętrznym arkuszu stylów, wygrywa najnowsza reguła:
Przykład
h1 {background-color: yellow;}
h1 {background-color: red;}
Selektory identyfikatora mają większą szczegółowość niż selektory atrybutów — spójrz na następujące trzy wiersze kodu:
Przykład
div#a {background-color: green;}
#a {background-color: yellow;}
div[id=a] {background-color: blue;}
pierwsza zasada jest bardziej szczegółowa niż dwie pozostałe i dlatego będzie stosowana.
Selektory kontekstowe są bardziej szczegółowe niż selektor pojedynczego elementu — osadzony arkusz stylów jest bliżej elementu, który ma być stylizowany. Więc w następującej sytuacji
Przykład
From external CSS file:
#content h1 {background-color: red;}
In HTML file:
<style>
#content h1 {background-color:
yellow;}
</style>
ta ostatnia zasada zostanie zastosowana.
Selektor klasy pokonuje dowolną liczbę selektorów elementów — selektor klasy, taki jak .intro bije h1, p, div itp.:
Przykład
.intro {background-color: yellow;}
h1 {background-color:
red;}
Selektor uniwersalny (*) i wartości dziedziczone mają specyficzność 0 — selektor uniwersalny (*) i wartości dziedziczone są ignorowane!