Código

  <!doctype html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>Herencia&l/title>
        <style type="text/css">
          #caja header h1 {color: red}
          #caja .cabecera h1 {color: green}
          header h1 {color: gray}
          h1 {color: blue}
          h1 {color: purple}
        </style>
      </head>
    <body>
    
    <div id="caja">
    
      <header class="cabecera">
        <h1>Cabecera: header</h1>
      </header>
      
      </div>
    </body>
  </html>

Cabecera: header

#caja header h1 {color: red}

A = 0 estilos en línea
B = 1 ID
C = 0 clases
D = 2 elemento
Puntuación = 0,1,0,2 => 102

#caja .cabecera h1 {color: green}

A = 0 estilos en línea
B = 1 ID
C = 1 clases
D = 1 elemento
Puntuación = 0,1,1,1 => 111 => GANADOR

header h1 {color: gray}

A = 0 estilos en línea
B = 0 ID
C = 0 clases
D = 2 elemento
Puntuación = 0,0,0,2 => 2

h1 {color: blue}

A = 0 estilos en línea
B = 0 ID
C = 0 clases
D = 1 elemento
Puntuación = 0,0,0,1 => 1

h1 {color: purple}

A = 0 estilos en línea
B = 0 ID
C = 0 clases
D = 1 elemento
Puntuación = 0,0,0,1 => 1