CSS En cascada


Ejemplo

La cascada y la especificidad se utilizan juntas para determinar el valor final de una propiedad de estilo CSS. También definen los mecanismos para resolver conflictos en conjuntos de reglas CSS.

CSS orden de carga

Los estilos se leen de las siguientes fuentes, en este orden:

  1. Hoja de estilo del agente de usuario (los estilos suministrados por el proveedor del navegador)
  2. Hoja de estilo del usuario (el estilo adicional que un usuario ha establecido en su navegador)
  3. Hoja de estilo del autor (Autor aquí significa el creador de la página web / sitio web)
    • Tal vez uno o más archivos .css
    • En el elemento <style> del documento HTML
  4. Estilos en línea (en el atributo de style en un elemento HTML)

El navegador buscará los estilos correspondientes al renderizar un elemento.

¿Cómo se resuelven los conflictos?

Cuando solo un conjunto de reglas CSS intenta establecer un estilo para un elemento, entonces no hay conflicto y se usa ese conjunto de reglas.

Cuando se encuentran varios conjuntos de reglas con configuraciones en conflicto, primero las reglas de Especificidad y luego las reglas en cascada se usan para determinar qué estilo usar.

Ejemplo 1 - Reglas de especificidad

.mystyle { color: blue; }  /* specificity: 0, 0, 1, 0 */
div { color: red; }        /* specificity: 0, 0, 0, 1 */
<div class="mystyle">Hello World</div>

¿De qué color será el texto? (pasa el cursor para ver la respuesta)

azul

Primero se aplican las reglas de especificidad, y la que tiene la mayor especificidad "gana".

Ejemplo 2 - Reglas de cascada con selectores idénticos

Archivo css externo

.class {
  background: #FFF;
}

Css interno (en archivo HTML)

<style>
.class {
  background: #000;
}
<style>

En este caso, donde tiene selectores idénticos, la cascada se activa y determina que el último cargado "gana".

Ejemplo 3 - Reglas en cascada después de las reglas de especificidad

body > .mystyle { background-color: blue; }   /* specificity: 0, 0, 1, 1 */
.otherstyle > div { background-color: red; }  /* specificity: 0, 0, 1, 1 */
<body class="otherstyle">
  <div class="mystyle">Hello World</div>
</body>

¿De qué color será el fondo?

rojo

Después de aplicar las reglas de especificidad, todavía hay un conflicto entre azul y rojo, por lo que las reglas en cascada se aplican sobre las reglas de especificidad. En cascada se analiza el orden de carga de las reglas, ya sea dentro del mismo archivo .css o en la colección de fuentes de estilo. El último cargado anula los anteriores. En este caso, la regla .otherstyle > div "gana".

Una nota final

  • La especificidad del selector siempre tiene prioridad.
  • Hoja de estilo para romper lazos.
  • Los estilos en línea triunfan sobre todo.