Explique como o navegador determina a quais elementos os estilos CSS se aplicam.

O navegador analisa a árvore HTML e as regras CSS, depois constrói a árvore de renderização (árvore de renderização), que liga os elementos DOM aos estilos CSS correspondentes.

O processo de determinação de estilos inclui várias etapas:

1. Análise de HTML e CSS: O navegador analisa o documento HTML, criando uma árvore DOM. Ao mesmo tempo, analisa os estilos CSS (de tags <style>, <link> ou estilos inline), criando uma árvore CSSOM (Modelo de Objetos CSS).

2. Correspondência de seletores: O navegador percorre a árvore DOM e procura regras correspondentes no CSSOM para cada nó no DOM. A correspondência é feita da direita para a esquerda. Por exemplo, para o seletor .parent .child, o navegador primeiro procura elementos com a classe child, depois verifica se eles têm um pai com a classe parent. Este método permite descartar rapidamente grandes subárvores que não correspondem ao seletor.

3. Cascata: Quando várias regras são encontradas para um mesmo elemento, o navegador aplica a cascata. A cascata determina a ordem de aplicação dos estilos com base em:

   • A fonte dos estilos (estilos do autor, do usuário, do navegador).
   • A especificidade dos seletores.
   • A ordem de aparecimento das regras.
   • O uso de !important.

   Exemplo de especificidade:

   Tipo de seletor	Pontos
   Estilos inline	1000
   Seletor ID	100
   Classes, atributos	10
   Tags, pseudo-elementos	1
   Universal (*)	0

   Seletores mais específicos têm prioridade.

4. Herança: Algumas propriedades CSS são herdadas de elementos pais para filhos (por exemplo, font-size, color). O navegador leva isso em consideração ao aplicar estilos.

5. Construção da árvore de renderização: Com base na árvore DOM e nos estilos CSS aplicados, constrói-se a árvore de renderização (ou árvore de layout). Ela contém apenas elementos visíveis e seus estilos necessários para o layout e renderização.

   // Exemplo: elemento com várias regras CSS
   // HTML: <p class="text">Hello!</p>
   
   /* CSS */
   p {  /* Especificidade: 1 */
     color: blue;
   }
   
   .text {  /* Especificidade: 10 */
     color: red; /* Esta cor será aplicada, pois é mais específica */
     font-size: 16px;
   }
   
   p.text { /* Especificidade: 11 */
      font-weight: bold; /* Esta propriedade será aplicada */
   }
   
   /* A ordem também é importante para seletores com a mesma especificidade */
   div { color: green; }
   div { color: yellow; } /* Será aplicada a cor amarela */
   

Assim, o navegador passa pelas etapas de análise, correspondência, cascata e herança para determinar o conjunto final de estilos para cada elemento antes de construir a árvore de renderização e realizar a renderização.