Problème de priorité des sélecteurs

Bonjour à tous,

Problème rencontré plusieurs fois dont je ne comprends pas bien l'origine et j'aimerais que vous m'éclairiez de vos multiples lanternes

A un endroit de ma feuille de style j'ai cette déclaration :

#content #news li a:hover {
color: #06C;
}

et plus bas je vais plus loin pour préciser ceci :

#content #news li .numbers .last a:hover {
background: none;
color: #333;
}

Et malheureusement, la 1ère règle écrase (de façon illogique je trouve) la seconde au niveau de la couleur du texte.

Pourriez-vous m'expliquer d'où vient mon incompréhension, il doit y avoir une des règles de base que je ne "suis" pas mais je ne vois pas laquelle

Merci d'avance à tous

une erreur de syntaxe ?

Le selecteur cible :

élément #content contenant

élément #news contenant

<li> contenant

un element avec la class .numbers contenant

un element avec la class .last contenant

un lien survolé a:hover

GC

J'ai vérifié la syntaxe, tout a l'air correct, et le sélecteur "fonctionne" puisque le background:none est bien pris en compte mais pas la couleur :-s

Merci pour ton aide en tous cas
Modifié par Ohmygoodweb (23 May 2011 - 20:37)

re

Si le probleme est communs a plusieurs navigateur, c'est que tu as probablement un autre selecteur dans une feuille de style ... style en ligne/balise ou un !important qui traine ...

Bizarre en effet.

++

salut,

tu cibles quoi exactement avec ton motif de sélecteurs ?
je les trouve compliqués

A+
Modifié par o06 (23 May 2011 - 23:34)

Bonjour,

Et en supprimant l'espace entre li et .numbers ?

Une solution temporaire serai de mettre un !important pour ta couleur.

#content #news li .numbers .last a:hover {
background: none;
color: #333 !important;
}

La solution de Laurie-Anne semble être la bonne. Malheureusement tu ne pourras pas faire li.numbers.last tout coller ce qui est pour moi une solution (voir LA solution) car ce n'est pas compatible IE6 et 7.

A+
Modifié par Vincent_nk (24 May 2011 - 01:49)

Salut,

Est-ce que ta classe .last cible le dernier li ?

Si c'est le cas, tu peux faire :

#content #news li.numbers:last-child a:hover {
background: none;
color: #333;
}