Siendo:
A = estilo en línea
B = número de IDs
C = número de clases
D = número de marcas HTML
se tiene que en este código:
<style type="text/css">
h1 { color: lightgreen; }
h1 { color: lightblue; }
#caja .cabecera h1 {
color: orange;
}
#caja header h1 {
color: red;
}
header h1 {
color: green;
}
</style>
La regla de color rojo tiene una tupla de tipo (A, B, C, D) = (0, 0, 0, 1)
La regla de color verde tiene una tupla de tipo (A, B, C, D) = (0, 0, 0, 1) y tendría prioridad sobre la anterior, al tener los mismos valores, por estar escrita después.
La regla de color azul tiene una tupla de tipo (A, B, C, D) = (0, 1, 1, 1)
La regla de color negro tiene una tupla de tipo (A, B, C, D) = (0, 1, 0, 2)
La regla de color morado tiene una tupla de tipo (A, B, C, D) = (0, 0, 0, 2)
Poniendo de mayor a menor las tuplas:
(0, 1, 1, 1)
(0, 1, 0, 2)
(0, 0, 0, 2)
(0, 0, 0, 1) (tendría más prioridad que la roja al estar después de ella en el código)
(0, 0, 0, 1)
LA GANADORA ES LA REGLA DEL BLOQUE AZUL, QUE COLOREA LA CABECERA DE TIPO H1 DE COLOR NARANJA (COMO SE VE ARRIBA).