Brauzerin CSS üslublarının hansı elementlərə tətbiq olunduğunu necə müəyyən etdiyini izah edin.

Brauzer HTML ağacını və CSS qaydalarını analiz edir və sonra DOM elementlərini müvafiq CSS üslubları ilə əlaqələndirən render ağacını (render tree) qurur.

Üslubların müəyyənləşdirilməsi prosesi bir neçə mərhələdən ibarətdir:

1. HTML və CSS-in analiz olunması: Brauzer HTML sənədini analiz edir və DOM ağacını yaradır. Eyni zamanda, <style>, <link> teqlərindən və ya inline üslublardan CSS üslublarını analiz edir və CSSOM (CSS Ob'ekt Model) ağacını yaradır.

2. Seçicilərin uyğunluğu: Brauzer DOM ağacını keçir və hər DOM düyümü üçün CSSOM-da uyğun qaydaları axtarır. Uyğunluq sağdan sola həyata keçirilir. Məsələn, .parent .child seçicisi üçün, brauzer əvvəlcə child sinfinə malik elementləri axtarır, sonra onların parent sinfinə malik valideynlərinin olub-olmadığını yoxlayır. Bu yanaşma seçici ilə uyğun olmayan böyük alt ağacları sürətlə xaric etməyə imkan verir.

3. Kaskad: Eyni element üçün bir neçə qayda tapıldıqda, brauzer qaydaları kaskad edir. Kaskad, üslubların tətbiq olunma ardıcıllığını aşağıdakı amillərə əsasən müəyyən edir:

   • Üslubların mənbəyi (müəllif üslubları, istifadəçi üslubları, brauzer üslubları).
   • Seçicilərin xususi və dəqiqliyi.
   • Qaydaların yaranma ardıcıllığı.
   • !important istifadə olunması.

   Xüsusiyyətlərin dəqiqliyinin nümunəsi:

   Seçici növü	Xallar
   Inline üslublar	1000
   ID seçicilər	100
   Siniflər, atributlar	10
   Taglar, pseudo-elementlər	1
   Ümumi (*)	0

   Daha dəqiq seçicilər üstünlük təşkil edir.

4. Miras: Bəzi CSS xüsusiyyətləri valideyn elementlərdən uşaqlara miras alınır (məsələn, font-size, color). Brauzer bu vəziyyəti nəzərə alır.

5. Render ağacının qurulması: DOM ağacı və tətbiq olunan CSS üslublarına əsaslanaraq, render ağacı (və ya layout ağacı) qurulur. Bu ağac yalnız görünən elementləri və onların yerləşdirilməsi və göstərilməsi üçün lazım olan üslubları ehtiva edir.

   // Nümunə: bir neçə CSS qaydası olan element
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Xüsusiyyətlərin sayı: 1 */
     color: blue;
   }
   
   .text {  /* Xüsusiyyətlərin sayı: 10 */
     color: red; /* Bu rəng tətbiq olunacaq, çünki daha dəqiqdir */
     font-size: 16px;
   }
   
   p.text { /* Xüsusiyyətlərin sayı: 11 */
      font-weight: bold; /* Bu xüsusiyyət tətbiq olunacaq */
   }
   
   /* Sıra da eyni dəqiqlikdə olan seçicilər üçün vacibdir */
   div { color: green; }
   div { color: yellow; } /* Sarı rəng tətbiq olunacaq */
   

Beləliklə, brauzer analiz, uyğunluq, kaskad və miras mərhələlərindən keçərək, hər element üçün son üslub dəstini müəyyən edir və sonra render ağacını qurur və göstərir.