Prioridad en CSS

Fichero fuente HTML (con CSS)

<!doctype html>
<html>

<head>
<meta charset="utf­8">
<title>Herencia</title>
<style type="text/css">
/* Las dos siguientes afectan al elemento: 0,0,0,1 */
/* En igualdad de condición, predomina la última (gray) */
h1 { color: red }
h1 { color: gray }
/* La siguiente incluye clase y elemento: 0,0,1,1 */
.cabecera h1 { color: yellow }
/* La siguiente, id, clase y dos elementos: 0,1,1,2 */
#caja header.cabecera h1 { color: magenta}
/* Esta otra, id y elemento: 0,1,0,1 */
#caja h1 { color: orange }
/* Y por fin, id y dos elementos: 0,1,0,2 */
#caja header h1 { color: cyan }
/* La "ganadora" es la que tiene el valor mayor (0,1,1,2) que
 * corresponde al color magenta */
</style>
</head>

<body>
<div id="caja">
<header class="cabecera">
    <h1>Cabecera: header</h1>
</header>
</div>
</body>

</html>

Resultado visual

Cabecera: header