Jak działają różne priorytety stylów w CSS?

W CSS priorytety stylów są określane za pomocą mechanizmu kaskadowania i specyficzności selektorów. Podstawowe zasady to:

1. Specyficzność — to waga selektora, obliczana na podstawie liczby ID, klas, tagów i innych składników. Im wyższa specyficzność, tym priorytetniejszy styl.

   • Selektor ID (#id) ma wysoką priorytet.
   • Klasy (.klasa), atrybuty i pseudoklasy mają średni priorytet.
   • Tagi (div, p) mają niski priorytet.

2. Kaskadowanie — jeśli dwa reguły mają tę samą specyficzność, stosuje się ta, która jest zadeklarowana później w kodzie.

3. !important — dodaje maksymalny priorytet do stylu, nadpisując inne reguły, z wyjątkiem innych !important o wyższej specyficzności.

4. Dziedziczenie — niektóre właściwości (np. color, font-family) są dziedziczone od rodzica, jeśli nie są nadpisane.

Przykład:

#header { color: red; }       /* specyficzność 100 */
.menu { color: blue; }        /* specyficzność 10  */
div { color: green; }         /* specyficzność 1   */

/* Jeśli element ma id="header" i klasę="menu", kolor będzie czerwony */

W ten sposób przeglądarka wybiera styl o najwyższej specyficzności, uwzględniając kolejność i obecność !important.