Sobes.tech
Intervjuu abi
Vahendid
Intervjuu ettevalmistamine
Vahendid
Tööotsing
Vahendid
Juriidiline
Tagasi küsimuste juurde
Middle

Selgitage, kuidas brauser määrab, millistele elementidele tuleb rakendada CSS-stiile.

sobes.tech AI

Vastus AI-lt

Brauser määrab, milliseid elemente CSS-stiile mõjutada, kasutades otsingu ja sobitamise mehhanisme, mis põhinevad CSS-valijatel.

Protsess toimub järgmiselt:

  1. CSS-i analüüs: Brauser analüüsib CSS-faile ja <style> plokke HTML-s, luues sisemise stiilide esituse.
  2. HTML-i analüüs: Brauser analüüsib HTML-i, luues DOM (Document Object Model) puu.
  3. Sobitamine (Matching): Iga DOM-i sõlme puhul püüab brauser seda CSS-i reeglitega sobitada. Seda tehakse kontrollides CSS-valijaid. Tavaliselt töötab see kõige spetsiifilisemast osast vähem spetsiifilisemani (paremalt vasakule). Näiteks, div article p valija puhul, esmalt leitakse p, siis kontrollitakse, kas see on article järglane, mis omakorda on div järglane.
  4. Rakendamine (Applying): Kui DOM-i sõlm vastab ühele või mitmele CSS-i reeglile, rakendab brauser vastavad stiilid sellele sõlmele. Kui on mitu rakendatavat reeglit, määrab brauser lõpliku stiili, kasutades spetsiifilisust, avaldamise järjekorda ja pärandumist.

Spetsiifilisus (Specificity):

Spetsiifilisus on algoritm, mida brauser kasutab CSS-valijate kaalu arvutamiseks. Mida spetsiifilisem valija, seda kõrgem prioriteet. Spetsiifilisus arvutatakse ID-de, klasside/pseudoklasside/atribuutide ning elementide/pseidoelementide arvu põhjal valijas.

// Spetsiifilisuse arvutamine: (a, b, c)
// a = ID-de arv
// b = klasside, pseudoklasside, atribuutide arv
// c = elementide, pseudoelementide arv
// Inline stiilidel on kõrgeim prioriteet (1, 0, 0, 0)
// `*` valijal on spetsiifilisus (0, 0, 0)

Näide spetsiifilisuse arvutamisest:

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

Avaldamise järjekord:

Kui kaks reeglit omavad sama spetsiifilisust, rakendatakse see, mis on CSS-koodis viimati avaldatud.

Pärandum (Inheritance):

Mõned CSS-omadused päranduvad vanemelementidelt lastele (näiteks color, font-family). Kui omadusele ei ole otseselt määratud väärtust, otsib brauser pärandatud väärtust DOM-puust ülespoole.

Seega määrab brauser stiilid elemendile, sobitades selektoreid, lahendades konfliktid spetsiifilisuse ja avaldamise järjekorra abil ning arvestades pärandumist.

EelmineEdasi