Ներկայացրեք, թե ինչպես է բրաուզերը որոշում, թե որ տարրերին են կիրառվում CSS ոճերը.

Բրաուզերը վերլուծում է HTML ծառը և CSS կանոնները, ապա կառուցում է ռենդերային ծառ (render tree), որը կապում է DOM տարրերը համապատասխան CSS ոճերի հետ:

Ոճերի որոշման գործընթացը ներառում է մի քանի քայլ.

1. HTML և CSS-ի վերլուծություն: Բրաուզերը վերլուծում է HTML փաստաթուղթը և ստեղծում DOM ծառը: Միաժամանակ վերլուծվում են CSS ոճերը (ցանկացած <style> տեգից, <link> տեգից կամ inline ոճերից), և ստեղծվում է CSSOM ծառը (CSS Object Model):

2. Սելեկտորների համապատասխանեցում: Բրաուզերը անցնում է DOM ծառով և յուրաքանչյուր հանգույցի համար որոնում է համապատասխան կանոններ CSSOM-ում: Համապատասխանեցումը կատարվում է աջից ձախ: Օրինակ, սելեկտոր .parent .child համար, բրաուզերը նախ որոնում է child դասով տարրերը, ապա ստուգում, արդյոք նրանց ծնողը parent դասով է: Այս մոտեցումը թույլ է տալիս արագ մերժել մեծ ենթաարևելիներ, որոնք չեն համապատասխանում սելեկտորին:

3. Կասկադավորում: Երբ նույն տարրին համար մի քանի կանոններ են գտնվել, բրաուզերը կիրառում է կասկադի կանոնները: Կասկադը որոշում է ոճերի կիրառման հերթականությունը՝ հիմնվելով.

   • ոճերի աղբյուրի վրա (ստեղծող, օգտվողի, բրաուզերի)
   • սելեկտորների հատուկության վրա
   • կանոնների հաջորդականության վրա
   • !important օգտագործման վրա

   Օրինակ, սելեկտորների հատուկությունը որոշելու համար.

   Սելեկտորի տեսակ	միավորներ
   Inline ոճեր	1000
   ID սելեկտորներ	100
   Կլասներ,ատրիբուտներ	10
   Տեգեր, псевдоэлементներ	1
   Ընդհանուր (*)	0

   Ավելի հատուկ սելեկտորները ունեն բարձր առաջնահերթություն:

4. Ներառում: Որոշ CSS հատկություններ ժառանգվում են ծնողական տարրերից դեպի երեխաներ (օրինակ, font-size, color): Բրաուզերը հաշվի է առնում դա կիրառման ժամանակ:

5. Ռենդերային ծառի կառուցում: Դրա հիման վրա, DOM ծառի և կիրառված CSS ոճերի վրա, կառուցվում է ռենդերային կամ layout ծառ: Այն պարունակում է միայն տեսանելի տարրերը և նրանց ոճերը, որոնք անհրաժեշտ են դասավորության և գծագրության համար:

   // Օրինակ՝ մի տարր, որի վրա մի քանի 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; } /* Կիրառվում է դեղին գույնը */
   

Այսպիսով, բրաուզերը անցնում է վերլուծության, համապատասխանեցման, կասկադավորման և ժառանգության փուլերով, որպեսզի որոշի յուրաքանչյուր տարրի վերջնական ոճերը՝ նախքան ռենդերային ծառի կառուցումը և դրա ցուցադրումը։