INF.03Frontend & CSS
Kaskadowość i Specyficzność stylów CSS (Waga selektorów)
Algorytm określający, która reguła CSS ma pierwszeństwo w przypadku konfliktu stylów nakładanych na ten sam element.
Hierarchia specyficzności selektorów:
!important– nadpisuje wszystkie inne reguły (używać z rozwagą).- Style liniowe (inline) w atrybucie
style="..."– waga 1000 - Identyfikatory (
#id) – waga 100 - **Klasy (
.klasa), pseudoklasy (:hover), atrybuty ([type="..."])` – waga 10 - **Elementy (tagi
div,p) i pseudoelementy (::before)` – waga 1 - Selektor uniwersalny (
*) – waga 0
Zasada kolejności:
Jeśli dwa selektory mają dokładnie taką samą wagę, wygrywa reguła zdefiniowana później (niżej w kodzie arkusza stylów).
Najczęstsze pułapki na egzaminie INF.03:
- Styl zdefiniowany w zewnętrznym pliku CSS może zostać nadpisany przez styl w sekcji
<style>w nagłówku, jeśli ma taką samą wagę i został wczytany później.
Chcesz sprawdzić to pojęcie w praktyce?
Przeszukaj pytania z oficjalnych arkuszy CKE powiązane z hasłem Kaskadowość i Specyficzność stylów CSS (Waga selektorów) lub rozpocznij trening.