Prioridad en CSS
Fichero fuente HTML (con CSS)
<!doctype html>
<html>
<head>
<meta charset="utf8">
<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