Obliczanie specyficzności: inline style, ID, klasa, element
Nauczy się Pan/Pani obliczać poziomy specyficzności i przewidywać, która reguła wygra dowolny konflikt stylów.
Obliczanie specyficzności: inline style, ID, klasa, element to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.
Czym jest specyficzność
Specyficzność określa, która reguła CSS zwycięży, gdy wiele reguł dotyczy tego samego elementu i właściwości. Jest obliczana jako wynik złożony z 4 części: (A, B, C, D), gdzie A ma najwyższy, a D najniższy priorytet.
Składniki specyficzności
Cztery kolumny:
- A: style inline (atrybut style="") = 1,0,0,0
- B: selektory identyfikatorów (#id) = 0,1,0,0
- C: selektory klas (.class), selektory atrybutów i pseudoklasy = 0,0,1,0
- D: selektory typów (elementów) i pseudoelementy = 0,0,0,1
Przykłady specyficzności
Obliczanie specyficzności:
<p>Plain paragraph — matches <code>p</code></p>
<p class="card">Card paragraph — matches <code>.card</code></p>
<div id="header">
Header block — matches <code>#header</code>
<span class="logo">Logo — matches <code>#header .logo</code></span>
</div>
<p class="intro">Intro paragraph — matches <code>p.intro</code></p>
<nav class="nav">
<a href="#" class="nav-link active">Active link — matches <code>.nav .nav-link.active</code></a>
</nav>Selektor uniwersalny nie ma specyficzności
Selektor uniwersalny *, kombinatory (+, >, ~, spacja) oraz pseudoklasa :where() wnoszą do specyficzności zero (0,0,0,0).
Style inline mają pierwszeństwo
Style inline (atrybut style="") mają najwyższą specyficzność (1,0,0,0). Tylko !important może je nadpisać z poziomu reguły arkusza stylów.
Porównywanie wyników specyficzności
Porównuj wyniki od lewej do prawej. Pierwsza kolumna, w której wyniki się różnią, określa zwycięzcę. (0,1,0,0) wygrywa z (0,0,99,99), ponieważ kolumna identyfikatorów rozstrzyga porównanie natychmiast.
Specyficzność :is(), :not() i :has()
:is(), :not() i :has() przejmują specyficzność swojego najbardziej specyficznego argumentu:
<div id="header">:is(#header, .nav) match via ID</div>
<nav class="nav">:is(#header, .nav) match via class</nav>
<button class="active">Active button (excluded from :not(.active))</button>
<button>Plain button (matches :not(.active))</button>
<p class="p">:where(.p) paragraph</p>Specyficzność nth-child
:nth-child(), :first-child, :hover i inne pseudoklasy dodają (0,0,1,0), czyli specyficzność na poziomie klasy.
Specyficzność pseudoelementów
::before, ::after, ::first-line itd. dodają (0,0,0,1), czyli specyficzność na poziomie elementu. Znajdują się w kolumnie D.
Specyficzność to nie dziedziczenie
Specyficzność jest obliczana osobno dla każdej właściwości i elementu. Reguła o wyższej specyficzności wygrywa dla danej właściwości, ale wartości odziedziczone po rodzicu o wysokiej specyficzności nie wygrywają z bardziej specyficznymi regułami zastosowanymi bezpośrednio do elementu potomnego.
Narzędzia do obliczania specyficzności
Użyj narzędzi online, takich jak specificity.keegan.st, lub narzędzi deweloperskich przeglądarki, aby zweryfikować specyficzność. W DevTools przekreślone style w panelu Styles wskazują, że zwyciężyła reguła o większej specyficzności.
Szybki test
Który selektor ma wyższą specyficzność: #sidebar .link czy .nav .nav-item .nav-link.active?
Podsumowanie
Wyniki specyficzności mają postać (A, B, C, D): style inline, identyfikatory, klasy/atrybuty/pseudoklasy oraz elementy/pseudoelementy. Porównuj je od lewej do prawej — pierwsza różniąca się kolumna rozstrzyga wynik. :where() zawsze wnosi zero. Jeden identyfikator wygrywa z dowolną liczbą selektorów klas. Używaj panelu Styles w DevTools, aby sprawdzić, które reguły wygrywają i dlaczego.
Często zadawane pytania
Czy lekcja „Obliczanie specyficzności: inline style, ID, klasa, element” jest bezpłatna?
Tak — pełny tekst „Obliczanie specyficzności: inline style, ID, klasa, element” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Obliczanie specyficzności: inline style, ID, klasa, element”?
Nauczy się Pan/Pani obliczać poziomy specyficzności i przewidywać, która reguła wygra dowolny konflikt stylów. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć CSS Academy?
Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Obliczanie specyficzności: inline style, ID, klasa, element”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?
Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Obliczanie specyficzności: inline style, ID, klasa, element
- Kaskada: źródło i kolejność
- !important: kiedy i dlaczego nie
- Dziedziczenie i właściwość all