Realizar en el siguiente HTML 5 declaraciones de estilo CSS que afecten al mismo elemento, el titilar h1, con diferentes puntuaciones de prioridad, e indicar su puntuación como un comentario en el propio HTML

Por orden de prioridad se evalúa:

  1. A = estilo en línea
  2. B = número de IDs
  3. C = número de clases
  4. D = número de marcas HTML

Cabecera: header

<div id="caja">
	<header class="cabecera">
		<h1>Cabecera: header</h1>
	</header>
</div>

Este <h1> tiene un ID, una clase y dos etiquetas HTML. Al empatar por ID, se le aplica la regla por clase.

Cabecera: header

<div id="caja">
	<header>
		<h1>Cabecera: header</h1>
	</header>
</div>

Este <h1> tiene un ID y dos etiquetas HTML. El ID le da prioridad sobre el resto de reglas.

Cabecera: header

<header>
	<h1>Cabecera: header</h1>
</header>

Este <h1> tiene como ancestor a <header> y este a <body>. Al no tener estilo en línea, id o clases, se ve afectado por la regla con más marcas HTML

Cabecera: header

Este <h1> se encuentra fuera de clases e IDs (su ancestor directo es <body> por lo que se aplica la fuente) por lo que solo le afectan las declaraciones puras a su etiqueta. Al tener prioridad la última es la que se le aplica.

Cabecera: header

<div id="caja">
	<header class="cabecera">
		<h1 style="color:orange">Cabecera: header</h1>
	</header>
</div>

Cabecera: header

Este <h1 style="color:orange"> al tener un estilo en línea lo aplica por ser de máxima prioridad, tanto si se encuentra en solitario como heredando IDs o clases 

h1 { color: purple; }
h1 { color: grey; }
// Puntuación = 0,0,0,1 
#caja .cabecera h1 { color: red; }
// Puntuación = 0,1,1,1
#caja header h1 { color: blue; }
// Puntuación = 0,1,0,2
header  h1 { color: lime; }
// Puntuación = 0,0,0,2
span { color:blue;}