Cuando distintos estilos afectan a un mismo elemento, entran en competición unos con otros para decidir cual de ellos da su apariencia final al elemento. Dicha competición tiene un ganador "a los puntos" atendiendo a los siguientes criterios:
El texto de cabecera "Cabecera: header" de esta página está definido de la siguiente manera:
<div id="caja">
<header class="cabecera">
<h1 style="color:red;">Cabecera: header</h1>
</header>
</div>
En la página se han establecido los siguientes estilos que le afectan en distintos grados:
Estilo | Explicación | Puntos |
---|---|---|
p { padding: 5px 3px 5px 3px; } | Este estilo no afecta a la cabecera, ya que esta no es ni se encuentra dentro de un elemento de párrafo. Este estilo ni siquiera se clasifica para competir en este caso. | 0 |
h1 { color: grey; } | Este estilo que quiere que el color del texto de cabecera sera gris se aplica a la cabecera por estar dentro de una etiqueta h1. Su puntuación sería de 1 punto. | 1 |
header h1 { color: lime; } | Este estilo se aplica a la cabecera por estar dentro de una etiqueta h1 (1 punto) que a su vez está dentro de otra etiqueta header (1 punto más). Obtiene un punto por cada etiqueta. | 2 |
#caja .cabecera h1 { color: blue; } | Este estilo aplica a la cabecera por tres vías: por ser una etiqueta h1 (1 punto); por ser descendiente de un elemento de clase "cabecera" (10 puntos más) y por ser descendiente de un div de nombre #caja (¡100 puntos!). 111 puntos a favor de una cabecera de color azul. | 111 |
#caja header h1 { color: green; } | Este estilo, como el anterior, se aplica a la cabecera por tres vías: por su etiqueta h1 (1 punto); por ser descendiente de una etiqueta header (1 puntos) y por ser descendiente de un elemento de nombre #caja (¡100 puntos!). 102 puntos. En este momento, la cabecera podría ser verde. | 102 |
style="color:red;" | Este estilo se aplica directamente al elemento h1 del título. Obtiene directamente 1000 puntos contra los que ninguno de los estilos anteriores puede competir. Con esta puntuación no hay duda de que el texto "Cabecera: header" será rojo, sí o sí. | 1000 |