Cálculo de la prioridad:
#caja h1 {color:blue;} {A=0, B=1, C=0, D=1, Puntuación: 0101}
.cabecera h1 {color:green;} {A=0, B=0, C=1, D=1, Puntuación: 0011}
#caja header h1 {color:pink;} {A=0, B=1, C=0, D=2, Puntuación: 0102}
header h1 {color:lime;} {A=0, B=0, C=0, D=2, Puntuación: 0002}
#caja .cabecera h1 {color:purple;} {A=0, B=1, C=1, D=1, Puntuación: 0111}
h1 {color:red;} {A=0, B=0, C=0, D=1, Puntuación: 0001}
Donde:
- A: estilos en línea.
- B: ID.
- C: Clases
- D: elementos.
La prioridad mas alta es la que afecta a "#caja .cabecera h1" y por tanto el texto sale en morado.