W CSS (Cascading Style Sheets) ostateczny wygląd elementu wynika z kaskady, czyli zestawu reguł określających, która deklaracja "wygrywa", gdy kilka z nich dotyczy tego samego elementu i tej samej właściwości.
Na ilustracji w bloku <style> widoczne są trzy kolejne reguły dla selektora p:
- p { color: yellow; }
- p { color: black; }
- p { color: red; }
Wszystkie trzy mają taką samą specyficzność, ponieważ są to identyczne selektory elementu (specyficzność typu 0,0,1). W tej sytuacji, gdy konfliktem jest ta sama właściwość (color), decyduje kolejność wystąpienia w kodzie: późniejsza deklaracja nadpisuje wcześniejszą.
Dlatego przeglądarka zastosuje ostatnią regułę: p { color: red; }. To oznacza, że teksty akapitów (<p>...</p>) będą wyświetlane na czerwono.
Dlaczego pozostałe odpowiedzi są błędne?
- Żółty – byłby poprawny tylko wtedy, gdyby żółta deklaracja była ostatnia albo gdyby miała wyższą specyficzność (np. selektor z klasą/ID) lub użyto by !important.
- Czarny – analogicznie: byłby wynikiem, gdyby reguła z black znajdowała się na końcu, a tu jest w środku i zostaje nadpisana.
- Zielony – w pokazanym arkuszu nie ma deklaracji color: green, więc taki kolor nie może wynikać z tych reguł.
Wskazówka egzaminacyjna: gdy widzisz kilka reguł dla tego samego selektora i tej samej właściwości, najpierw sprawdź specyficzność. Jeśli jest taka sama, spójrz na kolejność w arkuszu — najczęściej wygrywa reguła zapisana najpóźniej.
