<head>
<style type="text/css">
#caja .cabecera h1 {color: lightcoral;} [0, 1, 1, 1]
#caja .cabecera {color: aquamarine;} [0, 1, 1, 0]
#caja {color: hotpink;} [0, 1, 0, 0]
.cabecera {color: grey;} [0, 0, 1, 0]
.cabecera > h1 {color: green;} [0, 0, 1, 1]
header, h1 {color: blue;} [0, 0, 0, 2]
h1 { color: purple; } [0, 0, 0, 1]
body { color: cadetblue; } [0, 0, 0, 1]
</style>
</head>
<body>
<div id="caja">
<header class="cabecera">
<h1 style="color: red;">Caso 1</h1> [1, 0, 0, 0]
<h1>Caso 2 </h1> [0, 1, 1, 1]
<p>Caso 3</p> [0, 1, 1, 0]
</header>
<h1>Caso 4</h1> [0, 0, 0, 1]
<p>Caso 5</p> [0, 1, 0, 0]
</div>
<h1>Caso 6</h1> [0, 0, 0, 1]
<p>Caso 7</p> [0, 0, 0, 1]
</body>
Al lado de cada elemento de estilo se muestra la puntuación así como la puntuación aplicada en cada uno de los diferentes casos. Debajo vemos el resultado de ejecutar este código html con estos estilos en el navegador.
Caso 3 (aquamarine)
Caso 5 (hotpink)
Caso 7 (cadetblue)
Los diferentes casos alternan elementos h1 y p dentro de los diferentes niveles del documento (header, div, body) para comprobar que estilo se está aplicando en cada caso a partir de los cambios de color del texto. El tamaño del mismo nos indica cuando corresponde a un elemento <h1> y a un elemento <p>