Color non pris en compte

Bonjour !

Pour un site sur lequel je bosse, j'ai une seule feuille de style (ce à quoi je compte remédier rapidement) : default.css
A la fin de cette feuille de style, j'ai voulu rajouter une classe pour une nouvelle "zone" sur le site. J'ai donc ça :

.chatBox {
color:#fff;
background-color:#031627;
}

.chatBox a { 
border:1px solid green; /* test, à virer */
color:#fff;
}

.chatBox li {
list-style-type:none;
}

Ben j'ai bien ma bordure blanche pour mon bloc ".chatBox", j'ai bien le fond bleu foncé, j'ai bien la bordure verte autour de mes liens (donc à fortiori le selecteur est correct) mais je n'ai ni la couleur blanche de mes liens, ni le "pas de puce" pour mes li...

Si je rajoute un !important, la ça marche, j'ai ce que je veux, mais j'avoue que ça va me faire ch*er de rajouter un !important à chaque ligne.

Sachant que ce code css est en bas de mon fichier, ne devrait-il pas écraser les valeurs déclarées plus haut ? De quoi cela peut-il venir ?

EDIT : ah nan, le list-type-type:none !important; ne change rien pour les listes :x

Merci d 'avance !


Palleas
Modifié par palleas_44 (20 Mar 2008 - 15:15)

Bonjour,

Ce n'est pas parce que ta définition (ou ta redéfinition) est en fin de fichier que celle-ci est celle qui sera appliquée. En effet, le navigateur va appliquer la règle qui est la plus restrictive.

Par exemple, la première règle du code suivant prévaudra sur la seconde. Cette première règle est plus restrictive que la première.

div.myclass { 
color: red;
}
.myclass {
color: blue;
}

Pour résoudre ton problème, tu dois trouver la/les règle(s) qui prévalle sur celle que tu as mis en fin de fichier. Pour t'aider tu peux utiliser Firebug pour facilement voir le style qui est appliqué.

Antoine Cailliau a écrit :
Cette première règle est plus restrictive que la première.

Hmm... c'est surtout qu'elle a une priorité plus forte. Prenons un exemple:

#content p {color: gray;}
p.important {color: red;}

Le premier sélecteur a une priorité plus importante que le second (0101 contre 0011). Un paragraphe enfant ou descendant du bloc ayant l'identifiant "content" sera donc en gris, même si ce paragraphe porte la classe "important".
Par contre, on pourrait considérer que le second sélecteur est plus «restrictif», surtout si div#content contient de nombreux paragraphes, et si la classe "important" n'est appliquée que très ponctuellement à certains paragraphes.

Sur la priorité des sélecteurs, on pourra lire:
http://openweb.eu.org/articles/cascade_css/

Florent V. a écrit :

Hmm... c'est surtout qu'elle a une priorité plus forte.

Mon terme restrictif illustrait seulement le fait que la première règle était moins générique (c'est à dire, s'appliquant potentiellement à moins d'élément). Le terme priorité est sans doute plus appoprié.

Raaah, je ne pensais pas que l'intégration CSS pouvait être aussi subtile ! Merci à tous du coup, j'm'en va me documenter sur le lien de Florent =)