Cabecera: header

<!doctype html>
<html>
<head>
<meta charset="utf·8">
<title>Herencia</title>
<style type="text/css">
#caja {color:purple;}100
#caja .cabecera h1 {color:green;}112
.cabecera h1 {color: blue;}11
#caja h1 {color:red;}101
h1 {color:brown;}
h1 {color:grey;}
</style>
</head>
<body>
<div id="caja">
<header class="cabecera">
<h1>Cabecera: header</h1> <style type="text/css"> h1 {color:yellow;}</style>
</header>
</div>
</body>
</html>

VAMOS CON LA SOLUCIÓN

  1. h1 {color:brown;} y h1 {color:grey;} tienen un valor de 1.
  2. .cabecera h1 {color: blue;} tiene un valor de 11
  3. #caja {color:purple;} tiene un valor de 100
  4. #caja h1 {color:red;} tiene un valor de 101
  5. #caja .cabecera h1 {color:green;} tiene un valor de 111
  6. Pero en este caso la prioridad la tiene el estilo en línea:
    <h1>Cabecera: header</h1> <style type="text/css"> h1 {color:yellow;}</style>