Tarayıcının CSS stillerinin hangi öğelere uygulandığını nasıl belirlediğini açıklayın.

Tarayıcı, HTML ağacını ve CSS kurallarını analiz eder, ardından DOM öğelerini ilgili CSS stilleriyle bağlayan render ağacını (render tree) oluşturur.

Stillerin belirlenmesi süreci birkaç adımdan oluşur:

1. HTML ve CSS'nin ayrıştırılması: Tarayıcı, HTML belgesini ayrıştırır ve bir DOM ağacı oluşturur. Aynı zamanda, <style>, <link> etiketlerinden veya satır içi stillerden CSS stillerini ayrıştırır ve bir CSSOM (CSS Nesne Model) ağacı oluşturur.

2. Seçicilerin eşleştirilmesi: Tarayıcı, DOM ağacını dolaşır ve DOM'daki her düğüm için CSSOM'daki uygun kuralları arar. Eşleştirme sağdan sola yapılır. Örneğin, .parent .child seçicisi için, tarayıcı önce child sınıfına sahip öğeleri arar, sonra bunların parent sınıfına sahip bir ebeveyni olup olmadığını kontrol eder. Bu yöntem, seçiciyle uyuşmayan büyük alt ağaçların hızla elenmesine olanak tanır.

3. Kaskad: Aynı öğe için birden fazla kural bulunursa, tarayıcı kuralları kaskad eder. Kaskad, stillerin uygulanma sırasını şu faktörlere göre belirler:

   • Stil kaynağı (yazar stilleri, kullanıcı stilleri, tarayıcı stilleri).
   • Seçicilerin özgüllüğü.
   • Kuralların ortaya çıkış sırası.
   • !important kullanımı.

   Örnek özgüllük:

   Seçici Türü	Puanlar
   Satır içi stiller	1000
   ID seçiciler	100
   Sınıflar, öznitelikler	10
   Etiketler, pseudo-öğeler	1
   Evrensel (*)	0

   Daha özgüllü seçiciler önceliğe sahiptir.

4. Miras: Bazı CSS özellikleri, ebeveyn öğelerden çocuklara miras edilir (örneğin, font-size, color). Tarayıcı, stil uygularken bunu dikkate alır.

5. Render ağacının oluşturulması: DOM ağacı ve uygulanan CSS stillerine dayanarak, render ağacı (veya layout ağacı) oluşturulur. Bu ağaç, yalnızca görünür öğeleri ve düzenleme ile çizim için gerekli stilleri içerir.

   // Örnek: Birden fazla CSS kuralı içeren öğe
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Özgüllük: 1 */
     color: blue;
   }
   
   .text {  /* Özgüllük: 10 */
     color: red; /* Bu renk uygulanır çünkü daha özgüllüdür */
     font-size: 16px;
   }
   
   p.text { /* Özgüllük: 11 */
      font-weight: bold; /* Bu özellik uygulanır */
   }
   
   /* Sıra da aynı özgüllükteki seçiciler için önemlidir */
   div { color: green; }
   div { color: yellow; } /* Sarı renk uygulanır */
   

Bu şekilde, tarayıcı ayrıştırma, eşleştirme, kaskad ve miras aşamalarını geçerek, her öğe için nihai stil kümesini belirler ve ardından render ağacını oluşturup görüntüler.