Jak fungují různé priority stylů v CSS?

V CSS jsou priority stylů určovány mechanismem kaskádování a specifičností selektorů. Hlavní principy jsou:

1. Specifičnost — je váha selektoru, která se počítá na základě počtu ID, tříd, tagů a dalších komponent. Čím vyšší je specifičnost, tím je styl priorizovanější.

   • ID selektor (#id) má vysokou prioritu.
   • Třídy (.třída), atributy a pseudotřídy mají střední prioritu.
   • Tagy (div, p) mají nízkou prioritu.

2. Kaskádování — pokud mají dvě pravidla stejnou specifičnost, aplikuje se to, které je deklarováno později v kódu.

3. !important — přidává maximální prioritu stylu, přepisujíc ostatní pravidla, kromě jiných !important s vyšší specifičností.

4. Dědičnost — některé vlastnosti (color, font-family) jsou děděny od rodiče, pokud nejsou přepsány.

Příklad:

#header { color: red; }       /* specifičnost 100 */
.menu { color: blue; }        /* specifičnost 10  */
div { color: green; }         /* specifičnost 1   */

/* Pokud má prvek id="header" a třídu="menu", barva bude červená */

Tímto způsobem vybírá prohlížeč styl s nejvyšší specifičností, s přihlédnutím k pořadí a přítomnosti !important.