[Résolu] La cascade du CSS?

Bonjour!

J'utilise le CSS depuis longtemps, mais il y a une question que je me suis toujours posé et dont je n'ai jamais vraiment trouvé la réponse. J'attendais le jour où tout s'illuminerait soudainement et où tout ferait du sens, mais ce jour semble ne jamais venir...!

Voici donc une question toute simple, au risque de paraître ridicule, mais que voulez-vous... je n'arrive pas à comprendre le fonctionnement!

J'ai donc un div.

<div id="div" class="test"></div>

et du css

#div {
  height: 200px;
  width: 100px;
  border: 1px solid blue;
  background-color: red;
}

.test {
  background-color: green;
  height: 100px;
  padding-top: 100px;
}

Pourquoi mon div aura une hauteur de 200px, un bgcolor rouge (donc il gardera les propriétés de #div au lieu d'utiliser celles de .test), MAIS il aura quand même un padding-top de 100px?

Pourquoi est-ce que pour avoir le comportement désiré, je dois inscrire #div.test (ce qui diminue incroyablement la réutilisabilité)?

Merci!
Modifié par DarkMalow (03 Mar 2011 - 15:08)

Bonjour,

C'est une question de priorité : Cascade CSS et priorité des sélecteurs (étape 3).