Załóżmy, że mamy następujące reguły CSS dotyczące koloru tekstu dla elementu <p id="intro" class="highlight">Tekst</p>:

1. p { color: blue; }
2. .highlight { color: green; }
3. #intro { color: red; }
4. <p id="intro" class="highlight" style="color: yellow;">Tekst</p> Jaki kolor będzie miał tekst, biorąc pod uwagę zasady kaskadowości i specyficzności?

Poprawna odpowiedź: D (Żółty (zgodnie ze stylem lokalnym))

Zgodnie z hierarchią specyficzności CSS styl lokalny zadeklarowany bezpośrednio w elemencie style="color: yellow;" ma wagę (1,0,0,0), co przewyższa selektor identyfikatora #intro (0,1,0,0), klasy .highlight (0,0,1,0) oraz znacznika p (0,0,0,1). Tekst będzie żółty.

Dlaczego pozostałe opcje są nieprawidłowe?

• A: Reguła identyfikatora #intro zostaje nadpisana przez styl lokalny inline.
• B: Reguła klasy .highlight ma niższą specyficzność niż styl lokalny i identyfikator.
• C: Selektor znacznika p ma najniższą specyficzność w zestawieniu.