En el código fuente se puede obervar que sobre el elemento h1 se han definido 5 colores diferentes
h1 { color: purple; }
h1 { color: blue; }
header h1 { color: pink;}
#caja h1 { color: orange;}
.cabecera h1 {color: red;}
- Purple y blue que actúan sobre un solo elemento, cada uno tiene un valor (0,0,0,1) = 1 y si no hubiera más sería prioritario blue por ser el último definido
- Pink que afecta a los elementos header y h1, tiene un valor (0,0,0,2) = 2 , es prioritario respecto a las dos anteriores
- Red que actúa sobre la clase "cabecera" del elemento h1, tiene un valor (0,0,1,1) = 11 , es prioritario frente a los dos anteriores
- Orange que actúa sobre el identificador "caja" del elemento h1, tiene un valor (0,1,0,1) = 101 , es el valor más alto y como consecuencia define el color resultante de la cabecera