Podcast CSS – 003: Szczegółowość
Załóżmy, że pracujesz z następującym kodem HTML i CSS:
<button class="branding">Hello, Specificity!</button>
button {
color: red;
}
.branding {
color: blue;
}
Chodzi tu o 2 konkurujące reguły. Przycisk jednego z nich będzie czerwony, a drugi – niebieski. Która reguła jest stosowana do elementu? Algorytm specyfikacji CSS dotyczący szczegółowości jest kluczem do zrozumienia, w jaki sposób CSS decyduje o tym, jak konkurują ze sobą reguły.
Szczegółowość to jeden z 4 etapów kaskady, co omówiliśmy w poprzednim module – kaskadzie.
Ocena specyficzności
Każda reguła selektora jest punktowana. Możesz wyobrazić sobie, że poziom szczegółowości jest uzależniony od łącznego wyniku, a każdy typ selektora zdobywa punkty. Wygrywa selektor z najwyższym wynikiem.
W autentycznych projektach jest to precyzyjne, Chodzi o to, aby upewnić się, że reguły CSS, które zamierzasz zastosować, w rzeczywistości mają zastosowanie. przy jednoczesnym utrzymaniu niskich wyników, aby uniknąć złożoności. Wynik powinien być na tyle wysoki, ile jest potrzebny, zamiast dążyć do uzyskania jak najwyższego wyniku. W przyszłości konieczne może być zastosowanie bardziej istotnych elementów CSS. Jeśli postarasz się zdobyć najlepszy wynik, będzie to bardzo trudne.
Wynik dla każdego typu selektora
Za każdy typ selektora punkty są naliczane punkty. Musisz dodać wszystkie te punkty, aby obliczyć ogólną dokładność selektora.
Selektor uniwersalny
selektor uniwersalny (*
),
nie ma szczegółowości i otrzymuje 0 punktów.
Oznacza to, że reguła, która ma co najmniej 1 punkt, zastąpi ją
* {
color: red;
}
Element lub pseudoelementowy selektor
element (typ), lub pseudoelement selektor uzyskuje 1 punkt specyficzności .
Wybór typu
div {
color: red;
}
Selektor pseudoelementów
::selection {
color: red;
}
Selektor klasy, pseudoklasy lub atrybutu
Zajęcia, pseudo-class lub Selektor atrybutu uzyskuje 10 punktów dokładności.
Selektor zajęć
.my-class {
color: red;
}
Selektor pseudoklasy
:hover {
color: red;
}
Selektor atrybutów
[href='#'] {
color: red;
}
:not()
pseudoklasa nie wnosi nic do obliczania szczegółowości.
Selektory przekazywane jako argumenty są jednak uwzględniane przy obliczaniu szczegółowości.
div:not(.my-class) {
color: red;
}
Ta próbka będzie miała 11 punktów szczegółowości
bo ma 1 selektor typu (div
) i jedną klasę wewnątrz obiektu :not()
.
Selektor identyfikatorów
identyfikator
selektor uzyskuje 100 punktów dokładności,
o ile używasz selektora identyfikatora (#myID
), a nie selektora atrybutu ([id="myID"]
).
#myID {
color: red;
}
Atrybut stylu wbudowanego
kod CSS zastosowany bezpośrednio do atrybutu style
elementu HTML;
uzyskuje wynik w zakresie szczegółowości wynoszący 1000 punktów.
Oznacza to, że aby zastąpić je w CSS,
musisz stworzyć specyficzny selektor.
<div style="color: red"></div>
!important
reguła
I ostatnio, !important
na końcu wartości CSS uzyskuje wynik szczegółowości wynoszący 10 000 punktów.
Jest to najwyższy poziom szczegółowości, jaki można uzyskać dla pojedynczego produktu.
reguła !important
jest stosowana do właściwości CSS,
więc wszystkie elementy w regule ogólnej (selektor i właściwości) nie otrzymują tego samego wyniku precyzji.
.my-class {
color: red !important; /* 10,000 points */
background: white; /* 10 points */
}
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o ocenie dokładności
Jaki jest wynik precyzji atrybutu a[href="#"]
?
Szczegółowość w kontekście
Szczegółowość każdego selektora pasującego do elementu jest sumowana. Przeanalizujmy ten przykładowy kod HTML:
<a class="my-class another-class" href="#">A link</a>
Ten link zawiera 2 zajęcia. Dodaj ten kod CSS, aby uzyskać 1 punkt precyzji:
a {
color: red;
}
odwoływać się do jednej z klas w tej regule, ma teraz 11 szczegółowości:
a.my-class {
color: green;
}
dodaj do selektora inną klasę, ma teraz 21 szczegółowości:
a.my-class.another-class {
color: rebeccapurple;
}
dodaj do selektora atrybut href
,
ma teraz 31 szczegółowości:
a.my-class.another-class[href] {
color: goldenrod;
}
Na koniec dodaj do tego wszystko pseudoklasę :hover
,
selektor kończy się 41 punktami dokładności:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o ocenie dokładności
Który z tych selektorów jest wart 21 punktów?
article:hover a[href]
article.card.dark
article > section
Wizualizacja szczegółowości
W diagramach i kalkulatorach specyficzności szczegółowość można często przedstawić w następujący sposób:
Grupa po lewej zawiera selektory (id
).
Druga grupa to selektory klasy, atrybutu i pseudoklasy.
Ostatnia grupa to selektory elementów i pseudoelementów.
Ten selektor to 0-4-1
:
a.my-class.another-class[href]:hover {
color: lightgrey;
}
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę na temat wizualizowania szczegółowości
Który z tych selektorów to 1-2-1
?
#specialty:hover li.dark
[data-state-rad].dark#specialty:hover
section#specialty.dark
li#specialty section.dark
Pragmatyczne zwiększanie szczegółowości
Załóżmy, że mamy usługę porównywania cen, która wygląda tak:
.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
W przypadku kodu HTML wyglądającego tak:
<button class="my-button" onclick="alert('hello')">Click me</button>
Przycisk ma szare tło.
ponieważ drugi selektor uzyskuje 11 punktów dokładności (0-1-1
).
To dlatego, że ma jeden selektor typu (button
),
czyli 1 punkt i selektor atrybutu ([onclick]
), który wynosi 10 punktów.
Poprzednia reguła – .my-button
– otrzyma 10 punktów (0-1-0
),
bo ma 1 selektor klasy.
Jeśli chcesz wzmocnić tę regułę, powtórz selektor zajęć w ten sposób:
.my-button.my-button {
background: blue;
}
button[onclick] {
background: grey;
}
Przycisk będzie miał niebieskie tło.
ponieważ nowy selektor uzyskuje wynik precyzji wynoszący 20 punktów (0-2-0
).
Wynik specyficzności dopasowania oznacza, że wygrana jest najnowsza instancja
Na razie pozostańmy przy przykładowym przycisku i zmień CSS na taki:
.my-button {
background: blue;
}
[onclick] {
background: grey;
}
Przycisk ma szare tło.
bo oba selektory mają taki sam wynik specyficzności (0-1-0
).
Jeśli przełączysz reguły w kolejności źródłowej, przycisk będzie niebieski.
[onclick] {
background: grey;
}
.my-button {
background: blue;
}
To jedyna taka sytuacja, w której wygrywa nowsza usługa porównywania cen. W tym celu musi on pasować do specyfiki innego selektora, który wskazuje ten sam element.