Come specificare l'ordine delle classi CSS?

113

Sono un po 'confuso riguardo ai CSS e classall'attributo. Ho sempre pensato che l'ordine in cui ho specificato più classi nel valore dell'attributo ha un significato. La classe successiva potrebbe / dovrebbe sovrascrivere le definizioni della precedente, ma questo non sembra funzionare. Ecco un esempio:

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

Mi aspetto che il terzo esempio con class="basic extra"dovrebbe avere un bordo blu, poiché il bordo specificato in più sovrascriverebbe il bordo da base.

Sto usando FF 3 su Ubuntu 9.04

html css

— Tim Büthe
fonte

246

L'ordine in cui gli attributi vengono sovrascritti non è determinato dall'ordine in cui le classi sono definite classnell'attributo, ma dal punto in cui appaiono nel CSS.

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

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

Espandi lo snippet

Il testo in divapparirà greene non red; perché .myClass2è più in basso nella definizione CSS di .myClass1. Se dovessi scambiare l'ordine dei nomi delle classi classnell'attributo, non cambierebbe nulla.

— Zoidberg
fonte

14

Non riesco a capire perché lo implementerebbero in questo modo. Stranamente, questa è anche la mia opinione per la maggior parte delle altre cose che i CSS possono fare.

— byxor

@ perché perché le regole stanno a cascata . si applicano dall'alto in basso, da sinistra a destra. ha senso per me

— O-9

27

L'ordine delle classi nell'attributo è irrilevante. Tutte le classi classnell'attributo vengono applicate allo stesso modo all'elemento.

La domanda è: in quale ordine vengono visualizzate le regole di stile nel file .css. Nel tuo esempio, .basicviene dopo, .extraquindi le .basicregole avranno la precedenza ove possibile.

Se vuoi fornire una terza possibilità (ad esempio, che è .basicma che le .extraregole dovrebbero ancora essere applicate), dovrai inventare un'altra classe, .basic-extraforse, che lo prevede esplicitamente.

— VoteyDisciple
fonte

4

Questo può essere fatto, ma devi essere un po 'creativo con i tuoi selettori. Usando i selettori di attributo, puoi specificare cose come "inizia con", "finisce con", "contiene", ecc. Vedi l'esempio sotto usando lo stesso markup, ma con selettori di attributi.

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

Espandi lo snippet

— TravisV
fonte