Explica cómo el navegador determina qué elementos deben tener estilos CSS aplicados.

El navegador determina qué elementos aplicarles estilos CSS utilizando mecanismos de búsqueda y coincidencia basados en selectores CSS.

El proceso ocurre de la siguiente manera:

1. Análisis de CSS: El navegador analiza los archivos CSS y los bloques <style> en HTML, creando una representación interna de los estilos.
2. Análisis de HTML: El navegador analiza el HTML, creando el Árbol DOM (Document Object Model).
3. Coincidencia (Matching): Para cada nodo en el Árbol DOM, el navegador intenta hacer coincidirlo con las reglas CSS. Esto se hace verificando los selectores en las reglas CSS. Normalmente, el navegador trabaja de partes más específicas del selector a menos específicas (de derecha a izquierda). Por ejemplo, para el selector div article p, primero encuentra p, luego verifica si es un descendiente de article, que a su vez es un descendiente de div.
4. Aplicación (Applying): Si un nodo DOM coincide con una o varias reglas CSS, el navegador aplica los estilos correspondientes a ese nodo. En caso de varias reglas aplicables, el navegador determina el conjunto final de estilos usando reglas de especificidad, orden de declaración y herencia.

Especificidad (Specificity):

La especificidad es un algoritmo que usa el navegador para calcular el peso de un selector CSS. Un selector más específico tiene mayor prioridad al aplicar estilos. La especificidad se calcula en función de la cantidad de ID, clases/pseudoclases/atributos y elementos/pseudoelementos en el selector.

// a = cantidad de ID
// b = cantidad de clases, pseudoclases, atributos
// c = cantidad de elementos, pseudoelementos
// Los estilos en línea tienen la prioridad más alta (1, 0, 0, 0)
// El selector `*` tiene una especificidad de (0, 0, 0)

Ejemplo de cálculo de especificidad:

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

Orden de declaraciones:

Si dos reglas tienen la misma especificidad, se aplica la que fue declarada más recientemente en el código CSS.

Herencia (Inheritance):

Algunas propiedades CSS se heredan de los elementos padres a los hijos (por ejemplo, color, font-family). Si a una propiedad no se le asigna un valor explícito en el elemento, el navegador busca un valor heredado hacia arriba en el Árbol DOM.

De esta forma, el navegador determina los estilos para un elemento haciendo coincidir los selectores, resolviendo conflictos mediante la especificidad y el orden de declaración, y considerando la herencia.