Priorité CSS

Bonjour à tous !

Je n’arrive pas à bien comprendre les ordres de priorité sur les sélecteurs CSS. Il semble que les id soient plus importants que les classes qui sont de leur côté plus importantes que les noms de balise. Dans l'exemple ci-dessous, je m'amuse à mettre tous les liens <a> contenus dans <p id="para"> en rouge, puis de mettre un autre lien <a id="newa"> contenu dans <p id="para"> en vert. Malheureusement ça ne marche pas, contrairement à ce que mentionne la règle précédente. Pourriez-vous m'éclaircir ?

D'avance, merci.

MattP94

http://jsfiddle.net/xHbMj/2/

ou

Code:

---

1 2 3 4 5

<p id="para"> <a href="#">Rouge !</a> <a href="#">Rouge !</a> <a href="#" id="newa">Vert !</a> </p>

---

Code:

---

1 2 3 4 5 6 7 8 9

#para a { color: red; }   #newa { color: green; }

---

Comme ça, ça fonctionne :

Code:

---

1 2 3 4 5 6 7 8 9

#para a { color: red; }   #para a#newa { color: green; }

---

Merci beaucoup kOrt3x, je retiens la méthode !

Mais saurais-tu me dire où se situe l'ambiguîté pour le navigateur ? Est-ce une simple erreur de débutant ?

D'avance, merci.

Bonjour,

la règle est peu compliquée et vous l'avez comprise. ;)
...Et votre exemple est simple.

Dans les deux cas vous ciblez l'élément A mais avec des sélecteurs de poids différents.
Il est donc naturel que le sélecteur dont le poids est plus important l'emporte.
#para a l'emportera donc sur #newa.

Une petite illustration vaut mieux qu'une longue explication fastidieuse. :D

Pièce jointe 129709

D'accord, ça me semble clair ! :)

Merci beaucoup pour vos réponses.

MattP94