La cascada es lo que hace que las hojas de estilo CSS sean tan útiles. En resumen, la cascada define el orden de precedencia de cómo deben aplicarse los estilos conflictivos. En otras palabras, si tienes dos estilos:
p { color: rojo; }
p { color: azul; }
La cascada determina el color que deben tener los párrafos, aunque la hoja de estilo indica que deben ser tanto rojos como azules. En última instancia, sólo se puede aplicar un color a los párrafos, por lo que tiene que haber un orden. Y este orden se aplica por el cual los selectores (el p en el ejemplo anterior) tienen la mayor precedencia y el orden en que aparecen en el documento.
La siguiente lista es una simplificación de cómo su navegador decide la precedencia de un estilo:
- Busque en la hoja de estilo un selector que coincida con el elemento. Si no hay estilos definidos, utilice las reglas predeterminadas del navegador
- Busque en la hoja de estilo los selectores marcados como !importantes y aplíquelos a los elementos apropiados.
- Todos los estilos en la hoja de estilo anularán los estilos predeterminados del navegador (excepto en el caso de las hojas de estilo del usuario).
- Cuanto más específico sea el selector de estilo, mayor será su precedencia. Por ejemplo, div> p.class es más específico que p.class que es más específico que p.
- Finalmente, si dos reglas se aplican al mismo elemento y tienen la misma precedencia de selección, se aplicará la que se cargó por última vez . En otras palabras, la hoja de estilo se lee de arriba hacia abajo, y los estilos se aplican uno encima del otro.
Basado en esas reglas, en el ejemplo anterior, los párrafos se escribirían en azul, porque p { color: azul; } es el último en la hoja de estilo.
Esta es una explicación muy simplificada de la cascada. Si está interesado en saber más sobre el funcionamiento de la cascada, debería leer ¿Qué significa «Cascade» en las Hojas de Estilo en Cascada?
