W arkuszu stylów zdefiniowano reguły:
#naglowek { color: red; } .tytul { color: blue; }Na stronie znajduje się element
<h1 id="naglowek" class="tytul">. Zgodnie z zasadami kaskadowości tekst nagłówka będzie miał kolorA. czarny, ponieważ sprzeczne reguły wzajemnie się znoszą.
Źle. Sprzeczne reguły się nie znoszą - kaskada zawsze wybiera jedną z nich.
B. niebieski, ponieważ reguła klasy stoi w arkuszu później.
Źle. Kolejność rozstrzyga tylko przy równej szczegółowości, a identyfikator waży więcej niż klasa.
C. czerwony, ponieważ selektor identyfikatora ma większą szczegółowość niż selektor klasy.
Dobrze. Selektor #naglowek jest bardziej szczegółowy niż .tytul, więc wygrywa kolor czerwony.
D. fioletowy, ponieważ przeglądarka miesza oba kolory.
Źle. Przeglądarka nie miesza kolorów z różnych reguł, stosuje jedną wartość.
Nagłówek będzie czerwony, bo selektor identyfikatora ma większą szczegółowość niż selektor klasy. Gdy dwie reguły ustawiają tę samą właściwość tego samego elementu, przeglądarka wybiera regułę o wyższej szczegółowości (specificity), a dopiero przy równej decyduje kolejność w arkuszu. Szczegółowość liczy się w kolejności: style w atrybucie
style, identyfikatory #, klasy, atrybuty i pseudoklasy, na końcu nazwy znaczników. Do zapamiętania: #id wygrywa z .klasa, a .klasa z h1, niezależnie od kolejności reguł. Regułę o niższej szczegółowości może wzmocnić color: blue !important, ale nadużywanie tej deklaracji utrudnia utrzymanie stylów. Szczegółowość podgląda się w narzędziach deweloperskich przeglądarki (F12), które pokazują przekreślone, przegrane deklaracje.Kolejność reguł w arkuszu ma znaczenie tylko wtedy, gdy selektory mają tę samą szczegółowość. Tutaj
#naglowek i .tytul mają różną wagę, więc późniejsza reguła klasy nie nadpisze reguły identyfikatora - kolor niebieski odpada. Przeglądarka nigdy nie miesza kolorów z różnych reguł ani nie uznaje, że sprzeczne deklaracje się znoszą; zawsze wybiera jedną wartość według zasad kaskady. Czarny kolor pojawiłby się tylko wtedy, gdyby żadna reguła nie dotyczyła elementu, a fioletu nie da się uzyskać inaczej niż wpisując go wprost. W kaskadzie wygrywa #naglowek { color: red; }, bo selektor identyfikatora jest bardziej szczegółowy od selektora klasy. Pomocna zasada: im precyzyjniej selektor wskazuje element, tym większą ma wagę. Przy sprzecznych regułach zawsze idź po kolei: najpierw szczegółowość selektorów, dopiero potem kolejność w arkuszu. Wyjątkiem jest deklaracja !important, która wygrywa z regułami bez niej, ale w kodzie z pytania jej nie ma.