Izskaidrojiet, kā pārlūkprogramma nosaka, uz kuriem elementiem jāpiemēro CSS stili.

Pārlūkprogramma nosaka, uz kuriem elementiem piemērot CSS stilus, izmantojot meklēšanas un saskaņošanas mehānismus, kas balstīti uz CSS selektoriem.

Process notiek šādi:

1. CSS analīze: Pārlūkprogramma analizē CSS failus un <style> blokos HTML, izveidojot iekšējo stilu attēlojumu.
2. HTML analīze: Pārlūkprogramma analizē HTML, izveidojot DOM (Document Object Model) koku.
3. Saskaņošana (Matching): Katram DOM mezglam pārlūkprogramma mēģina to saskaņot ar CSS noteikumiem. Tas tiek darīts, pārbaudot CSS selektorus. Parasti tas darbojas no visvairāk specifiskās daļas uz mazāk specifisko (no kreisās uz labo). Piemēram, div article p selektoram, vispirms atradīs p, tad pārbaudīs, vai tas ir article bērns, kas savukārt ir div bērns.
4. Piemērošana (Applying): Ja DOM mezgls atbilst vienam vai vairākiem CSS noteikumiem, pārlūkprogramma piemēro attiecīgos stilus šim mezglam. Ja ir vairāki piemērojamie noteikumi, pārlūkprogramma nosaka galīgo stilu kopumu, izmantojot specifikāciju, paziņojumu secību un mantošanu.

Specifikācija (Specificity):

Specifikācija ir algoritms, ko pārlūkprogramma izmanto CSS selektoru svara aprēķināšanai. Jo specifiskāks selektors, jo tam ir augstāka prioritāte. Specifikācija tiek aprēķināta, ņemot vērā ID, klases/pseudoklases/atribūtu un elementu/pseidoelementu skaitu selektorā.

// Specifikācijas aprēķins: (a, b, c)
// a = ID skaits
// b = klases, pseido-klases, atribūtu skaits
// c = elementu, pseidoelementu skaits
// Inline stiliem ir augstākais prioritātes līmenis (1, 0, 0, 0)
// `*` selektoram ir specifikācija (0, 0, 0)

Piemērs specifikācijas aprēķinam:

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

Paziņojumu secība:

Ja divi noteikumi ir ar vienādu specifikāciju, tiek piemērots tas, kas ir publicēts pēdējais CSS kodā.

Mantošana (Inheritance):

Dažas CSS īpašības tiek mantojamas no vecāku elementiem uz bērniem (piemēram, color, font-family). Ja īpašībai nav tieši noteikta vērtība, pārlūkprogramma meklē mantojošo vērtību augšup DOM kokā.

Tādējādi pārlūkprogramma nosaka stilus elementam, saskaņojot selektorus, risinot konfliktus ar specifikāciju un paziņojumu secību, kā arī ņemot vērā mantošanu.