117 votes

Comment spécifier l'ordre des classes CSS?

Je suis un peu confus au sujet de la CSS et de la classe-attribut. J'ai toujours pensé, l'ordre dans lequel je spécifier plusieurs classes dans l'attribut de la valeur a un sens. Le cours ultérieur pourrait/devrait remplacer les définitions de la précédente, mais cela ne semble pas fonctionner. Voici un exemple:

<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>

Je l'espère, le troisième exemple avec class="basic extra" doit avoir une bordure bleue, depuis l'extra spécifié frontière serait de remplacer la frontière en provenance de la base.

Je suis sous FF 3 sur ubuntu 9.04

255voto

Zoidberg Points 5656

L'ordre dans lequel les attributs d'une classe sont écrasés n'est pas spécifié par l'ordre dans lequel les classes sont définies dans l'attribut class, mais plutôt dans lequel elles apparaissent dans le fichier css.

 .myClass1 {font-size:10pt;color:#ff0000}
.myClass2 {color:#00ff00;}
 

HTML

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

Le texte de la div apparaît en vert et non en rouge car myClass2 est plus bas dans la définition CSS que mon class1. Si je permutais l'ordre des noms de classe dans l'attribut de classe, rien ne changerait.

27voto

VoteyDisciple Points 23229

L'ordre des classes dans l'attribut n'est pas pertinent. Toutes les classes de l' class d'attribut 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 l' .extra si l' .basic règles de préséance dans la mesure du possible.

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X