Ordre d'exécution

Question

J'ai une assez grande page, qui contient beaucoup de css et html. La page est divisée en régions. Quelque part les bases pour chaque région sont définies (par exemple la couleur du texte, la couleur du lien, etc.).

Ceci est fait au début du fichier CSS. Vous avez cependant la possibilité de personnaliser l'aspect des modules dans une région. Donc, considérez le fait que j'ai une classe .right-zone sur la barre latérale. Je mets un module .navigation là-dedans. Une fois que j'ai personnalisé le module .navigation (via YUI), le CSS personnalisé est ajouté au fichier CSS standard et enregistré.

Je m'attendrais à ce que CSS soit interprété de haut en bas.

.right-zone a { color: #ff0000; } 

Est la base du document. Ainsi, après la personnalisation devient:

.right-zone a { color: #ff0000; } 
.navigation-module a { color: #0000ff; } 

imagine donc la structure du document:

[...] 
<div class="right-zone"> 
    <div class="navigation-module"> 
    <a href="http://www.stackoverflow.com/">foobar link</a> 
    </div> 
</div> 

Je peux seulement supposer que la couleur finale du lien serait # 0000ff - car il est la dernière déclaration le fichier CSS. Pour une raison quelconque, cela ne se fait pas sur mon site. Le CSS "général" est défini sur la ligne 335 - la définition du module de navigation est sur la ligne 409 et pourtant le lien est toujours coloré en rouge au lieu de bleu. Firebug montre la couleur rouge comme le style finalement appliqué et a une percée sur le bleu. Des idées pour lesquelles cela se passe?

Answer 1

Votre exemple donne un lien bleu pour moi, comme il se doit. Je suppose que vos vrais sélecteurs CSS sont plus complexes, et le premier est plus spécifique que le second.

Une règle ultérieure remplace seulement une précédente si elle a la même spécificité ou une plus grande spécificité. Par exemple, .navigation-module a ne remplacera pas une règle antérieure #right-zone a ou .right-zone div a.

Answer 2

C'est en cascade. Donc, une règle inférieure a la priorité.

// this would work as desired... 
.right-zone a { color: #ff0000; } 
.right-zone .navigation-module a { color: #0000ff; } 

Alternativement, vous pouvez utiliser important pour passer outre la précédence.

.right-zone a { color: #ff0000; } 
.navigation-module a { color: #0000ff !important; } 

Espérons que ça aide!

Answer 3

Cela a à voir avec ce que l'on appelle la spécificité CSS aussi (comme Frankie a touché un peu). Voir CSS-Tricks on Specificity

En gros:

[any selector] .navigation-module a { color: #0000ff; } 

rendrait plus "spécifique" et donc remplacer l'autre style. Notez également que oui la dernière définition avec la même spécificité gagnera.