Explica como o navegador determina quais os elementos aos quais devem ser aplicados estilos CSS.

O navegador determina quais elementos aplicar estilos CSS usando mecanismos de busca e correspondência baseados em seletores CSS.

O processo ocorre da seguinte forma:

1. Análise de CSS: O navegador analisa os ficheiros CSS e os blocos <style> no HTML, criando uma representação interna dos estilos.
2. Análise de HTML: O navegador analisa o HTML, criando a Árvore DOM (Document Object Model).
3. Correspondência (Matching): Para cada nó na Árvore DOM, o navegador tenta fazer corresponder com as regras CSS. Isto é feito verificando os seletores nas regras CSS. Normalmente, o navegador trabalha de partes mais específicas do seletor para menos específicas (da direita para a esquerda). Por exemplo, para o seletor div article p, primeiro encontra p, depois verifica se é um descendente de article, que por sua vez é um descendente de div.
4. Aplicação (Applying): Se um nó DOM corresponder a uma ou várias regras CSS, o navegador aplica os estilos correspondentes a esse nó. Em caso de várias regras aplicáveis, o navegador determina o conjunto final de estilos usando regras de especificidade, ordem de declaração e herança.

Especificidade (Specificity):

A especificidade é um algoritmo usado pelo navegador para calcular o peso de um seletor CSS. Um seletor mais específico tem prioridade maior na aplicação de estilos. A especificidade é calculada com base na quantidade de ID, classes/pseudoclasses/atributos e elementos/pseudoelementos no seletor.

// a = quantidade de ID
// b = quantidade de classes, pseudoclasses, atributos
// c = quantidade de elementos, pseudoelementos
// Estilos inline têm prioridade máxima (1, 0, 0, 0)
// O seletor `*` tem especificidade (0, 0, 0)

Exemplo de cálculo de especificidade:

• p: (0, 0, 1)
• .classe: (0, 1, 0)
• #id: (1, 0, 0)
• div p: (0, 0, 2)
• div .classe: (0, 1, 1)

Ordem de declarações:

Se duas regras tiverem a mesma especificidade, aplica-se a regra que foi declarada por último no código CSS.

Herança (Inheritance):

Algumas propriedades CSS são herdadas dos elementos pais para os filhos (por exemplo, color, font-family). Se uma propriedade não tiver um valor explícito no elemento, o navegador procura um valor herdado para cima na Árvore DOM.

Assim, o navegador determina os estilos para um elemento fazendo correspondência com os seletores, resolvendo conflitos com base na especificidade e na ordem de declaração, além de considerar a herança.