Wyjaśnij, jak przeglądarka określa, do których elementów stosowane są style CSS.

Przeglądarka analizuje drzewo HTML i reguły CSS, a następnie tworzy drzewo renderowania (drzewo renderowania), które łączy elementy DOM z odpowiednimi stylami CSS.

Proces określania stylów obejmuje kilka kroków:

1. Analiza HTML i CSS: Przeglądarka analizuje dokument HTML, tworząc drzewo DOM. Jednocześnie analizuje style CSS (z tagów <style>, <link> lub stylów inline), tworząc drzewo CSSOM (CSS Object Model).

2. Dopasowanie selektorów: Przeglądarka przechodzi przez drzewo DOM i dla każdego węzła w DOM szuka odpowiednich reguł w CSSOM. Dopasowanie odbywa się od prawej do lewej. Na przykład, dla selektora .parent .child, przeglądarka najpierw szuka elementów z klasą child, a następnie sprawdza, czy mają rodzica z klasą parent. Ta metoda pozwala szybko odrzucić duże poddrzewa, które nie pasują do selektora.

3. Kaskadowanie: Gdy dla tego samego elementu znajdzie się kilka reguł, przeglądarka stosuje kaskadowanie. Kaskadowanie określa kolejność stosowania stylów na podstawie:

   • Źródła stylów (style autorów, użytkowników, przeglądarki).
   • Specyficzności selektorów.
   • Kolejności pojawiania się reguł.
   • Użycia !important.

   Przykład specyficzności:

   Typ selektora	Punkty
   Style inline	1000
   Selektory ID	100
   Klasy, atrybuty	10
   Tagi, pseudo-elementy	1
   Uniwersalny (*)	0

   Bardziej specyficzne selektory mają priorytet.

4. Dziedziczenie: Niektóre właściwości CSS dziedziczą się od elementów rodziców do potomków (np. font-size, color). Przeglądarka uwzględnia to przy stosowaniu stylów.

5. Budowa drzewa renderowania: Na podstawie drzewa DOM i zastosowanych stylów CSS tworzony jest drzewo renderowania (lub drzewo układu). Zawiera ono tylko widoczne elementy i ich style niezbędne do układu i renderowania.

   // Przykład: element z wieloma regułami CSS
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Specyficzność: 1 */
     color: blue;
   }
   
   .text {  /* Specyficzność: 10 */
     color: red; /* Ta kolor zostanie zastosowany, ponieważ jest bardziej specyficzny */
     font-size: 16px;
   }
   
   p.text { /* Specyficzność: 11 */
      font-weight: bold; /* Ta właściwość zostanie zastosowana */
   }
   
   /* Kolejność ma również znaczenie dla selektorów o tej samej specyficzności */
   div { color: green; }
   div { color: yellow; } /* Zostanie zastosowany żółty */
   

W ten sposób przeglądarka przechodzi przez etapy analizy, dopasowania, kaskadowania i dziedziczenia, aby określić końcowy zestaw stylów dla każdego elementu przed zbudowaniem drzewa renderowania i renderowaniem.