W arkuszu stylów podano trzy deklaracje dla tego samego selektora typu p:
- p { color: yellow; }
- p { color: black; }
- p { color: red; }
Każda z nich dotyczy elementów akapitów (znaczników <p>) i ustawia tę samą właściwość: color, czyli kolor tekstu.
W CSS, gdy kilka reguł pasuje do tego samego elementu i konflikt dotyczy tej samej właściwości, przeglądarka stosuje mechanizm kaskadowości. Dla rozstrzygnięcia konfliktu kluczowe są m.in.:
- ważność (np. !important),
- pochodzenie (styl autora, użytkownika, domyślny),
- specyficzność selektora,
- kolejność wystąpienia w arkuszu.
W tym zadaniu wszystkie trzy reguły:
- mają tę samą "wagę" (brak !important),
- pochodzą z tego samego miejsca (jeden blok stylów autora),
- mają identyczną specyficzność, bo selektor jest taki sam: p.
Skoro ważność i specyficzność nie rozstrzygają sporu, decyduje kolejność: ostatnia deklaracja nadpisuje wcześniejsze. Dlatego finalnie kolor tekstu akapitów będzie ustawiony przez ostatnią regułę: color: red, czyli tekst będzie czerwony.
Pozostałe propozycje są niepoprawne, bo odpowiadają wcześniejszym (nadpisanym) deklaracjom lub w ogóle nie występują w kodzie. "Czarny" i "żółty" pojawiają się w arkuszu, ale przegrywają z późniejszą regułą. "Zielony" nie jest ustawiany w żadnej deklaracji, więc nie może być wynikiem przedstawionego stylu.
Wskazówka egzaminacyjna: gdy widzisz kilka razy ten sam selektor i tę samą właściwość, najpierw sprawdź, czy nie ma !important i czy specyficzność jest taka sama. Jeśli tak, patrz na regułę zapisaną najniżej w arkuszu.
