Comment spécifier l'ordre des classes CSS?

113

Je suis un peu confus au sujet du CSS et de l' classattribut. J'ai toujours pensé que l'ordre dans lequel je spécifiais plusieurs classes dans la valeur d'attribut avait une signification. La dernière classe pourrait / devrait écraser 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 m'attendrais à ce que le troisième exemple avec class="basic extra"devrait avoir une bordure bleue, car la bordure spécifiée supplémentaire écraserait la bordure de base.

J'utilise FF 3 sur Ubuntu 9.04

html css

— Tim Büthe
source

246

L'ordre dans lequel les attributs sont écrasés n'est pas déterminé par l'ordre dans lequel les classes sont définies dans l' classattribut, mais plutôt par où elles apparaissent dans le CSS.

.myClass1 {color:red;}
.myClass2 {color:green;}

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

Développer l'extrait

Le texte dans divapparaîtra green, et non red; car .myClass2est plus bas dans la définition CSS que .myClass1. Si je devais permuter l'ordre des noms de classe dans l' classattribut, rien ne changerait.

— Zoidberg
source

14

Je ne peux pas comprendre pourquoi ils l'implémenteraient comme ça. Curieusement, c'est aussi mon avis pour la plupart des autres choses que CSS peut faire.

— byxor

@ parce que les règles sont en cascade . ils s'appliquent de haut en bas, de gauche à droite. fait sens pour moi

— O-9

27

L'ordre des classes dans l'attribut n'est pas pertinent. Toutes les classes de l' classattribut sont appliquées de la même manière à l'élément.

La question est: dans quel ordre les règles de style apparaissent-elles dans votre fichier .css. Dans votre exemple, .basicvient après .extradonc les .basicrègles prévaudront dans la mesure du possible.

Si vous voulez fournir une troisième possibilité (par exemple, que c'est .basicmais que les .extrarègles doivent toujours s'appliquer), vous devrez peut-être inventer une autre classe .basic-extra, qui le prévoit explicitement.

— VoteyDisciple
source

4

Cela peut être fait, mais vous devez faire preuve d'un peu de créativité avec vos sélecteurs. En utilisant les sélecteurs d'attributs, vous pouvez spécifier des choses comme "commence par", "se termine par", "contient", etc. Voir l'exemple ci-dessous en utilisant votre même balisage, mais avec des sélecteurs d'attribut.

[class$="extra"] {
  color: #00529B;
  border:1px solid #00529B;
  background-color: #BDE5F8;
}
[class$="basic"] {
  border: 1px solid #ABABAB;
}
input {display:block;}

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

Développer l'extrait

— TravisV
source