clases en div's anidados

[bouinho]

Hola, tengo dos DIV anidados , y en cada uno de ellos tengo etiquetas h1.
Pretendo que la definición de h1 en el div "padre" sea distinta del div "hijo", por decirlo así.

para ello defino dos clases distintas para h1 y asigno cada clase a cada div.

pero me encuentro con una cosa muy curiosa. Esto funciona si la declaracion de las clases esta en el mismo orden en que luego las asigno en los div. Si le cambio el orden deja de funcionar... raro no?
pongo el codigo para que se entienda:

Código CSS:

.info_tabla h1 {
color: #FFFFFF;
background-color:#000000;
font-family: "Times New Roman", Times, serif;
font-size: 25px;
height:50px;
width:100px;
} 
.datos_tabla h1 {
color: #33CC00;
background-color: #0066CC;
font-family: "Times New Roman", Times, serif;
font-size: 15px;
height:20px;
width:100px;
 
}
 

Código HTML:

<div id="divpagina" class="info_tabla">
 
<h1> de info tabla</h1>
<div class="datos_tabla">
<h1> de datos tabla</h1>
</div> 
</div>
 

tal cual esta aqui funciona correctamente, pero si invierto el orden en la declaracion de las clases deja de funcionar:

Código CSS:

.datos_tabla h1 {
color: #33CC00;
background-color: #0066CC;
font-family: "Times New Roman", Times, serif;
font-size: 15px;
height:20px;
width:100px;
 
}
 
.info_tabla h1 {
color: #FFFFFF;
background-color:#000000;
font-family: "Times New Roman", Times, serif;
font-size: 25px;
height:50px;
width:100px;
}
 

Alguien sabe a que es debido? no debería ser indiferente el orden en que se declara si luego se hace referencia a la clase por el nombre de la misma?

Gracias ....