Comment spécifier l'ordre des classes CSS?

Je suis un peu confus au sujet de CSS et de l'attribut class. J'ai toujours pensé que l'ordre dans lequel je spécifie plusieurs classes dans la valeur de l'attribut a une signification. La classe ultérieure pourrait/devrait remplacer les définitions de la précédente, mais cela ne semble pas fonctionner. Voici un exemple:Comment spécifier l'ordre des classes CSS?

<html> 
<head> 
<style type="text/css"> 
    .extra { 
     color: #00529B; 
     border:1px solid #00529B; /* Blue */ 
     background-color: #BDE5F8; 
    } 

    .basic { 
      border: 1px solid #ABABAB; 
    } 
</style> 
</head> 
<body> 
    <input type="text" value="basic" class="basic"/> 
    <input type="text" value="extra" class="extra"/> 
    <input type="text" value="basic extra" class="basic extra"/> 
    <input type="text" value="extra basic" class="extra basic"/> 
</body> 
</html>

j'attendre, le troisième exemple avec class="basic extra" devrait avoir une bordure bleue, depuis la frontière à spécifiée supplémentaire écraserait la frontière de base.

J'utilise FF 3 sur ubuntu 9.04

Source

2009-08-24 Tim Büthe

182

L'ordre dans lequel sont écrasées les attributs d'une classe est non spécifiée par l'ordre dans lequel les classes sont définies dans l'attribut de classe, mais au lieu où ils apparaissent dans le css

.myClass1 {font-size:10pt;color:red} 
.myClass2 {color:green;}

HTML

<div class="myClass2 myClass1">Text goes here</div>

Le texte de la div apparaîtra vert et non rouge car myClass2 est plus bas dans la définition CSS que ma classe1. Si je devais échanger l'ordre des noms de classe dans l'attribut de classe, rien ne changerait.

Source

2009-08-24 11:01:40 Zoidberg

+12

Wow, j'ai vraiment eu tort. Incroyable combien de temps j'ai pu le faire sans m'en rendre compte :-) –

Ouais, ce n'est pas évident et j'ai fait la même chose que vous. Ça m'a pris des heures pour le comprendre. – Zoidberg

Je ne l'ai jamais su :) Super Conseil –

L'ordre des classes dans l'attribut est hors de propos. Toutes les classes de l'attribut class sont appliquées de manière égale à l'élément.

La question est: dans quel ordre les règles de style apparaissent dans votre fichier .css. Dans votre exemple, .basic vient après .extra donc les règles .basic auront préséance autant que possible.

Si vous souhaitez fournir une troisième possibilité (par exemple, qu'il est .basic mais que les règles .extra doit encore appliquer), vous aurez besoin d'inventer une autre classe, .basic-extra peut-être, qui prévoit expressément que.

Source

2009-08-24 10:59:07 VoteyDisciple

Comment spécifier l'ordre des classes CSS?

Répondre

Questions connexes