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:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Herencia</title>
</head>
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1>
</header>
</div>
</body>
</html>
Al elemento <h1> se le aplican las siguientes cinco declaraciones.
h1 {color: red;}
h1 {color: lime;}
header h1 {color: pink;}
#caja header h1 {color: blue;}
#caja .cabecera h1 {color: orange;}
Como su origen e importancia es la misma, se hace una valoración para saber cual predominará.
Para calcular la tupla (lista ordenada de elementos basada en A,B ,C, D) donde:
A= estilo de la línea
B= número de ID
C= número de clases
D= número de marcas HTML
Y el resultado según el cálculo es:
El selector h1 es el menos específico, sólo tiene una marca. Su puntuación sería 0,0,0,1
El selector header h1, se refiere a dos marcas. Su puntuación es de 0,0,0,2
El selector #caja header h1, se refiere una ID y dos marcas. Su puntuación es de 0,1,0,2
El selector #caja .cabecera h1, se refiere a una ID, una clase y una marca. Su puntuación es de 0,1,1,1
Por puntuación, ganará #caj .cabecera h1 {color: orange;} con 0111 puntos y el titular se muestra de color naranja.