Paaiškinkite, kaip naršyklė nustato, kuriems elementams taikyti CSS stilius.

Naršyklė nustato, kuriems elementams taikyti CSS stilius, naudodama paieškos ir suderinimo mechanizmus, pagrįstus CSS selektoriais.

Procesas vyksta šitaip:

1. CSS analizė: Naršyklė analizuoja CSS failus ir <style> blokus HTML, sukurdama vidinį stilių vaizdą.
2. HTML analizė: Naršyklė analizuoja HTML, sukurdama DOM (Document Object Model) medį.
3. Atitikimas (Matching): Kiekvienam DOM mazgui naršyklė bando jį suderinti su CSS taisyklėmis. Tai daroma tikrinant CSS selektorius. Paprastai, veikia nuo labiausiai specifinio iki mažiau specifinio (nuo kairės į dešinę). Pavyzdžiui, div article p selektoriui, pirmiausia ras p, tada patikrins, ar jis yra article palikuonis, kuris savo ruožtu yra div palikuonis.
4. Taikymas (Applying): Jei DOM mazgas atitinka vieną ar kelias CSS taisykles, naršyklė taiko atitinkamus stilius šiam mazgui. Jei yra keli taikomi taisyklės, naršyklė nustato galutinį stilių rinkinį naudodama specifikacijos, paskelbimo tvarkos ir paveldėjimo taisykles.

Specifiškumas (Specificity):

Specifiškumas yra algoritmas, kurį naršyklė naudoja CSS selektorių svoriui apskaičiuoti. Daugiau specifinis selektorius turi aukštesnį prioritetą. Specifiškumas skaičiuojamas pagal ID, klasių/pseudoklasės/atributų ir elementų/pseudoelementų skaičių selektoriuje.

// Specifiškumo skaičiavimas: (a, b, c)
// a = ID skaičius
// b = klasių, pseudoklasės, atributų skaičius
// c = elementų, pseudoelementų skaičius
// Inline stiliai turi aukščiausią prioritetą (1, 0, 0, 0)
// `*` selektorius turi specifiškumą (0, 0, 0)

Pavyzdys, kaip skaičiuojama specifiškumas:

• p: (0, 0, 1)
• .class: (0, 1, 0)
• #id: (1, 0, 0)
• div p: (0, 0, 2)
• div .class: (0, 1, 1)

Paskelbimo tvarka:

Jei du taisyklės turi tą pačią specifikaciją, ta taikoma, kuri paskelbta vėliau CSS kode.

Paveldėjimas (Inheritance):

Kai kurios CSS savybės paveldimos iš tėvų elementų vaikams (pvz., color, font-family). Jei savybės nėra aiškiai nustatytos elemente, naršyklė ieško paveldėtos reikšmės aukštyn DOM medyje.

Taip naršyklė nustato stilių elementui, suderinant selektorius, sprendžiant konfliktus pagal specifikaciją ir paskelbimo tvarką, taip pat atsižvelgiant į paveldėjimą.