Kaip veikia skirtingų stilių prioritetai CSS?

CSS prioritetai yra nustatomi naudojant kaskadavimo mechanizmą ir selektorių specifikaciją. Pagrindiniai principai:

1. Specifikacija — tai selektoriaus svoris, apskaičiuojamas pagal ID, klasių, žymų ir kitų komponentų skaičių. Kuo didesnė specifikacija, tuo didesnė prioritetas.

   • ID selektorius (#id) turi aukštą prioritetą.
   • Klasės (.klasė), atributai ir pseudoklasės turi vidutinį prioritetą.
   • Žymės (div, p) turi žemą prioritetą.

2. Kaskadavimas — jei dvi taisyklės turi tą pačią specifikaciją, ta, kuri yra paskelbta vėliau kode, ta ir taikoma.

3. !important — prideda maksimalų prioritetą stiliui, perrašydama kitas taisykles, išskyrus kitus !important su didesne specifikacija.

4. Paveldėjimas — kai kurios savybės (color, font-family) paveldimos iš tėvo, jei nėra perrašytos.

Pavyzdys:

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

/* Jei elementas turi id="header" ir klasę="menu", spalva bus raudona */

Taip naršyklė pasirinks stilių su aukščiausia specifika, atsižvelgdama į tvarką ir !important buvimą.