2010-03-10 3 views
23

Si j'ai deux fichiers css:Deux fichiers CSS définissant même classe

fichier 1:

.colorme 
{ 
    background-color:Red; 
} 

Fichier 2:

.colorme 
{ 
    background-color:Green; 
} 

Et les ai inclus dans une page, dont un aura la priorité? Je devine celui qui est chargé en dernier? Si oui, y a-t-il un moyen de s'assurer que le dernier fichier CSS est chargé en dernier?

+1

Il pourrait aider si vous ne pensez pas à ce que « la définition d'une classe ». Vous écrivez des jeux de règles avec des sélecteurs qui correspondent à des éléments. (Ces sélecteurs particuliers correspondent aux éléments en fonction de leur classe). Ensuite, la cascade s'applique: http://www.w3.org/TR/CSS21/cascade.html#cascade – Quentin

+1

Si vous n'avez pas de contrôle sur l'ordre des fichiers dans le code HTML, vous pouvez toujours vous assurer qu'une règle gagne avec le drapeau! important. – Tom

Répondre

48

Celui chargé en dernier (ou comme le souligne David, plus précisément inclus dernier) gagne dans ce cas. Notez que c'est par-propriété si, si vous chargez 2 définitions avec des propriétés différentes, le résultat sera la combinaison. Si une propriété est dans le premier et le second, le dernier gagne sur cette propriété. La seule façon de garantir la dernière/dernière utilisation est d'inclure les éléments <link> dans l'ordre souhaité dans la page.

Pour la propriété, voici un exemple:

.class1 { color: red; border: solid 1px blue; padding: 4px; } //First .css 
.class1 { color: blue; margin: 2px; } //Second .css 

équivaut à:

.class1 { color: blue; border: solid 1px blue; padding: 4px; margin: 2px; } 
+14

Être pédant: Ce n'est pas réellement celui * chargé * en dernier, c'est celui qui apparaît en dernier dans l'ordre des sources. Compte tenu du chargement asynchrone, vous pouvez avoir une feuille de style courte à la fin de la charge 'head' avant une longue au début. – Quentin

+0

@David - Bon point qui le rend beaucoup plus clair, mis à jour –

+0

Content de contribuer. – Quentin

Questions connexes