Ką reiškia terminas 'kaskadas' CSS?

CSS hierarchija nustato, kuris iš konfliktuojančių stilių turi būti taikomas elementui. Ji grindžiama trimis pagrindiniais kriterijais:

1. Svarba: Stiliai su !important turi aukščiausią prioritetą.
2. Specifiškumas: Daugiau specifiniai selektoriai perrašo mažiau specifinius. Specifiškumas skaičiuojamas pagal ID, klasių/pseudo-klasių/atributų selektorių ir žymių/pseudo-elemntų skaičių selektoriuje.
3. Kodo eilės tvarka: Jei svarba ir specifiškumas yra vienodi, taikoma paskutinė deklaruota taisyklė.

Be šių trijų, atsižvelgiama ir į kitus veiksnius:

• Stiliaus šaltinis: Vartotojo (naršyklės nustatymuose), autoriaus (išoriniai ir vidiniai stiliai, inline stiliai), naršyklės numatyti stiliai.
• Paveldėjimas: Kai kurios savybės paveldimos iš tėvų elementų į vaikus.

Pavyzdys specifikacijai:

/* Specifikacija: 0-1-0 */
mano-klase {
  spalva: mėlyna;
}

/* Specifikacija: 1-0-0 */
#mano-id {
  spalva: raudona;
}

Šiuo atveju, elementas su ID mano-id ir klase mano-klase turės raudoną teksto spalvą, nes ID #mano-id turi aukštesnę specifikaciją nei .mano-klase.