Specyficzność selektorów — CSS

Gdy kilka reguł dotyczy tego samego elementu, znaczenie mają pochodzenie, ważność, specyficzność i kolejność.

Cel lekcji

Poznać zagadnienie „Specyficzność selektorów”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Klasa jest bardziej specyficzna niż sam znacznik.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Wygląd strony w przeglądarce

p { color: gray; }
.notice { color: darkblue; }
/* <p class="notice">Tekst</p> */

Przeczytaj kod linijka po linijce

p { color: gray; }Nadajemy kolor lub wygląd tła.
.notice { color: darkblue; }Nadajemy kolor lub wygląd tła.

Oczekiwany wynik / efektpo uruchomieniu przykładu

Akapit z klasą notice otrzyma kolor darkblue.

◉Podgląd w przeglądarceHTML/CSS — bez uruchamiania skryptów

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Dodaj osobną klasę dla ostrzeżenia.