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 se deben aplicar los estilos en conflicto. En otras palabras, si tienes dos estilos:
p {color: rojo; }p {color: azul; }
La cascada determina de qué color deben ser los párrafos, a pesar de que la hoja de estilo indica que deben ser rojos y azules. En última instancia, solo se puede aplicar un color a los párrafos, por lo que tiene que haber un orden. Y este orden es aplicado por los selectores (el pag en el ejemplo anterior) tienen la mayor prioridad y el orden en el que aparecen en el documento.
La siguiente lista es una simplificación de cómo su navegador decide la prioridad para un estilo:
- Busque en la hoja de estilo un selector que coincida con el elemento. Si no hay estilos definidos, use las reglas predeterminadas en el navegador
- Busque en la hoja de estilo los selectores marcados.
!importantey aplicarlos a los elementos apropiados. - Todos los estilos en la hoja de estilo anularán los estilos de navegador predeterminados (excepto en el caso de las hojas de estilo del usuario).
- Cuanto más específico sea el selector de estilo, mayor será la prioridad que tendrá. Por ejemplo,
div> p.classes mas especifico queclaseque es mas especifico quepag. - Finalmente, si dos reglas se aplican al mismo elemento y tienen la misma prioridad de selector, la que se cargó último sera aplicado. En otras palabras, la hoja de estilo se lee de arriba a 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; } Viene último en la hoja de estilo.
Esta es una explicación muy simplificada de la cascada. Si está interesado en aprender más sobre cómo funciona la cascada, debe leer ¿Qué significa "cascada" en las hojas de estilo en cascada?
