Тавзеҳ диҳед, ки чӣ гуна браузер муайян мекунад, ки…

Браузер анализ мекунад дарахти HTML ва қоидаҳои CSS, сипас дарахти рендер (render tree)-ро месозад, ки унсурҳои DOM-ро бо услубҳои мувофиқи CSS пайваст мекунад.

Раванди муайян кардани услубҳо чанд қадамро дар бар мегирад:

Парс кардани HTML ва CSS: Браузер ҳуҷҷати HTML-ро парс мекунад ва дарахти DOM-ро месозад. Ҳамзамон, услубҳои CSS (аз тагҳои <style>, <link> ё услубҳои inline) парс мешаванд ва дарахти CSSOM (CSS Object Model) эҷод мешавад.
Мувофиқ кардани селекторҳо: Браузер ба дарахти DOM мегузарад ва барои ҳар як узви DOM қоидаҳои мувофиқро дар CSSOM меҷӯяд. Мувофиқ кардан аз рост ба чап сурат мегирад. Масалан, барои селектор .parent .child, браузер аввал меҷӯяд, ки кадом унсурҳо бо класи child ҳастанд, пас санҷиш мекунад, ки оё онҳо дорои падар бо класи parent ҳастанд. Ин усул имкон медиҳад, ки поддарахтҳои калон, ки ба селектор мувофиқат намекунанд, зуд рад карда шаванд.

Каскадсозӣ: Вақте барои як унсури ҳамон як қоидаҳо ёфтан, браузер қоидаҳои каскадро татбиқ мекунад. Каскадсозӣ тартиби истифодаи услубҳоро муайян мекунад, ки асосан аз:

манбаъи услуб (услубҳои муаллиф, услубҳои корбар, услубҳои браузер)
махсусиятнокии селекторҳо
тартиби қоидаҳо
истифодаи !important

Масалан, барои муайян кардани махсусиятнокии селекторҳо:

Навъи селектор	холҳо
Inline услубҳо	1000
ID-селекторҳо	100
Классҳо, атрибутҳо	10
Тагҳо, псевдоэлементҳо	1
Умумӣ (`*`)	0

Селекторҳои бештар махсусиятноктар дорои афзалият мебошанд.

Наследие: Баъзе хусусиятҳои CSS аз унсури падар ба фарзандон мерос мегиранд (масалан, font-size, color). Браузер инро ҳангоми татбиқи услубҳо ба назар мегирад.

Эҷоди дарахти рендер: Бар асоси дарахти DOM ва услубҳои CSS, дарахти рендер (ё layout tree) эҷод мешавад. Он танҳо унсурҳои намоён ва услубҳои онҳоро дар бар мегирад, ки барои тақсимот ва расмкашӣ заруранд.

// Масалан: унсуре бо чанд қоидаҳои CSS
// HTML: <p class="text">Hello!</p>

/* CSS */
p {  /* Маҳорати махсусиятнокӣ: 1 */
  color: blue;
}

.text {  /* Маҳорати махсусиятнокӣ: 10 */
  color: red; /* Ин ранг татбиқ мешавад, зеро он махсусиятноктар аст */
  font-size: 16px;
}

p.text { /* Маҳорати махсусиятнокӣ: 11 */
   font-weight: bold; /* Ин хусусият татбиқ мешавад */
}

/* Тартиб низ муҳим аст барои селекторҳои бо ҳамон махсусиятнокӣ */
div { color: green; }
div { color: yellow; } /* Ин ранг зард мешавад */

Ин тариқ, браузер қадамҳои парсинг, мувофиқ кардан, каскадсозӣ ва меросгириро мегузарад, то ки маҷмӯи ниҳоии услубҳоро барои ҳар унсур пеш аз сохтани дарахти рендер ва расмкашии он муайян кунад.

Тавзеҳ диҳед, ки чӣ гуна браузер муайян мекунад, ки ба кадом унсурҳо услубҳои CSS татбиқ мешаванд.