Sobes.tech
Junior

Mida tähendab termin 'kaskaad' CSS-is?

sobes.tech AI

Vastus AI-lt

CSS-i kaskaad määrab, milline konfliktne stiil peaks elemendile rakenduma. See põhineb kolmel peamisel kriteeriumil:

  1. Olulisus: !important-ga märgitud stiilidel on kõrgeim prioriteet.
  2. Spetsiifilisus: Spetsiifilisemad selektorid ülekirjutavad vähem spetsiifilisi. Spetsiifilisus arvutatakse ID-de, klasside/pseudo-klassi/atribuutselektorite ning tipp- ja pseudo-elemendi selektorite arvu põhjal.
  3. Koodi järjekord allikas: Kui olulisus ja spetsiifilisus on võrdsed, rakendub viimane deklareeritud reegel.

Lisaks nendele kolmele arvestatakse ka teisi tegureid:

  • Stiili allikas: Kasutaja stiilid (brauseri seadistustes), autori stiilid (välised ja sisemised stiilid, inline stiilid), brauseri vaikimisi stiilid.
  • Pärandum: Mõned omadused päranduvad vanem-elementidelt laste elementidele.

Näide spetsiifilisusest:

/* Spetsiifilisus: 0-1-0 */
.minu-klassi {
  värv: sinine;
}

/* Spetsiifilisus: 1-0-0 */
#minu-id {
  värv: punane;
}

Selles olukorras saab element, millel on ID minu-id ja klass minu-klassi, punase teksti värvi, kuna ID #minu-id on kõrgema spetsiifilisusega kui .minu-klassi.