28172 sujets

CSS et mise en forme, CSS3

Comportement bizarre de ma feuille de style...

Bonjour,

J'aimerai bien comprendre un autre bizarre qui m'arrive. J'ai le html suivant:

<div id="centre">
  <div id="principal">
    <h2>Les derni&egrave;res news</h2>
    <div class="lastNews">
      <div class="news">
        <h3><a href="" title="lire la suite">Le titre de la news</a></h3>
        <p>Le texte de la news.</p>
        <div class="footer">Auteur: Mathieu</div>
      </div>
    </div>
  </div>
</div>


et le css suivant:

#principal a {
    color: yellow;
}
.lastNews .news h3 a {
    color: green;
}


Je m'attend donc à avoir mon lien Vert. Mais non, il hérite de l'id "principal" (vu avec Firebug) et du coup mon lien et jaune... Je comprend pas pourquoi?

Merci de votre aide.

Mathieu
c'est dû à la priorité des selecteurs :
a écrit :
id > classe > tag


Le fait d'utiliser un #id est plus sélectif que des classes et des tags (quel que soit la longueur du sélecteur)
mmmm bien vu! Je ne savais pas qu'il y avait une priorité. Donc il faudrait que je fasse un truc dans le genre plutôt:

#principal .lastNews .news h3 a {
    color: green;
}


Merci de ton aide.

Mathieu
Sujet clos
Aller à