Cascada | ¿Qué estilos tienen prioridad?
Decide el resultado final de un estilo cuando existen varias declaraciones contrapuesta para un mismo elemento.
Conceptos que afectan al orden de aplicación de los estilos CSS:
- Importancia
- Especificidad
- Orden
Importancia
La importancia de una declaración CSS va a depender de dónde se haya especificado. Este es el orden de menor a mayor importancia.
- Estilos de agente de usuario (navegador)
- Estilos de usuario (definidos en el navegador por el usuario)
- Estilos de autor (persona que diseña la web)
- Estilos de autor importantes (!important)
- Estilos de usuario importantes (!important)
Especificidad
La especificidad es una unidad de medida para determinar cómo de específico es el selector de una norma de estilo. Tiene cuatro componentes que, de menor a mayor, son:
- Etiquetas HTML
- Clases y pseudoclases
- IDs
- Estilos en línea (style)
Lorem ipsum dolor, sit amet consectetur. Esto es un span dentro de un párrafo. Adipisicing elit. Itaque optio ab maiores repellendus dolor iusto nihil tempore, eveniet dolorum doloremque sed perspiciatis impedit dolore temporibus laborum laudantium laboriosam voluptas expedita.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque laborum facere quam eaque eius fuga ad minima explicabo molestiae eveniet, vitae quasi iste debitis. Vitae veniam mollitia aliquam? Quaerat, error.
Orden
Si dos normas de estilo son iguales en importancia y especificidad, se aplica la última norma definida en el css
Lorem ipsum dolor, sit amet consectetur. Esto es un span dentro de un párrafo. Adipisicing elit. Itaque optio ab maiores repellendus dolor iusto nihil tempore, eveniet dolorum doloremque sed perspiciatis impedit dolore temporibus laborum laudantium laboriosam voluptas expedita.