Explică cum determină browserul la ce elemente se aplică stilurile CSS.

Browserul analizează arborele HTML și regulile CSS, apoi construiește arborele de randare (render tree), care leagă elementele DOM de stilurile CSS corespunzătoare.

Procesul de determinare a stilurilor include mai mulți pași:

1. Analiza HTML și CSS: Browserul analizează documentul HTML, creând un arbore DOM. În același timp, analizează stilurile CSS (din etichetele <style>, <link> sau stilurile inline), creând un arbore CSSOM (CSS Object Model).

2. Potrivirea selectorilor: Browserul parcurge arborele DOM și caută pentru fiecare nod din DOM regulile corespunzătoare în CSSOM. Potrivirea se face de la dreapta la stânga. De exemplu, pentru selectorul .parent .child, browserul caută mai întâi elemente cu clasa child, apoi verifică dacă au un părinte cu clasa parent. Această metodă permite eliminarea rapidă a subarborilor mari care nu corespund selectorului.

3. Cascadarea: Când pentru același element se găsesc mai multe reguli, browserul aplică cascada. Cascada determină ordinea de aplicare a stilurilor pe baza:

   • Sursa stilurilor (stilurile autorului, ale utilizatorului, ale browserului).
   • Specificitatea selectorilor.
   • Ordinea apariției regulilor.
   • Utilizarea !important.

   Exemplu de specificitate:

   Tip de selector	Puncte
   Stil inline	1000
   Selectori ID	100
   Clase, atribute	10
   Etichete, pseudo-elemente	1
   Universal (*)	0

   Selectorii mai specifici au prioritate.

4. Moștenirea: Unele proprietăți CSS se moștenesc de la elementele părinte către cele copil (de exemplu, font-size, color). Browserul ține cont de acest lucru la aplicarea stilurilor.

5. Construirea arborelui de randare: Pe baza arborelui DOM și a stilurilor CSS aplicate, se construiește arborele de randare (sau arborele de layout). Acesta conține doar elementele vizibile și stilurile lor necesare pentru aranjare și redare.

   // Exemplu: element cu mai multe reguli CSS
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Specificitate: 1 */
     color: blue;
   }
   
   .text {  /* Specificitate: 10 */
     color: red; /* Această culoare va fi aplicată deoarece este mai specifică */
     font-size: 16px;
   }
   
   p.text { /* Specificitate: 11 */
      font-weight: bold; /* Această proprietate va fi aplicată */
   }
   
   /* Ordinea este, de asemenea, importantă pentru selectorii cu aceeași specificitate */
   div { color: green; }
   div { color: yellow; } /* Se va aplica galbenul */
   

Astfel, browserul parcurge etapele de analiză, potrivire, cascadare și moștenire pentru a determina setul final de stiluri pentru fiecare element înainte de a construi arborele de randare și de a realiza redarea.