Wie gebe ich die Reihenfolge der CSS-Klassen an?

113

Ich bin etwas verwirrt über CSS und das classAttribut. Ich habe immer gedacht, dass die Reihenfolge, in der ich mehrere Klassen im Attributwert spezifiziere, eine Bedeutung hat. Die spätere Klasse könnte / sollte Definitionen der vorherigen überschreiben, aber dies scheint nicht zu funktionieren. Hier ist ein Beispiel:

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

Ich würde erwarten, dass das dritte Beispiel mit class="basic extra"einen blauen Rand haben sollte, da der in extra spezifizierte Rand den Rand von Basic überschreiben würde.

Ich benutze FF 3 auf Ubuntu 9.04

html css Tim Büthe
quelle

246

Die Reihenfolge, in der die Attribute überschrieben werden, hängt nicht von der Reihenfolge ab, in der die Klassen im classAttribut definiert sind , sondern davon, wo sie im CSS angezeigt werden.

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

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

Erweitern Sie das Snippet

Der Text im divwird angezeigt greenund nicht red; weil .myClass2ist weiter unten in der CSS-Definition als .myClass1. Wenn ich die Reihenfolge der Klassennamen im classAttribut austauschen würde, würde sich nichts ändern.

Zoidberg
quelle

14

Ich kann nicht verstehen, warum sie es so implementieren würden. Lustigerweise ist das auch meine Meinung für die meisten anderen Dinge, die CSS tun kann.

Byxor

@ weil weil Regeln kaskadieren . Sie gelten von oben nach unten und von links nach rechts. macht für mich Sinn

O-9

27

Die Reihenfolge der Klassen im Attribut ist irrelevant. Alle Klassen im classAttribut werden gleichermaßen auf das Element angewendet.

Die Frage ist: In welcher Reihenfolge erscheinen die Stilregeln in Ihrer CSS-Datei? In Ihrem Beispiel .basicfolgt, .extradamit die .basicRegeln nach Möglichkeit Vorrang haben.

Wenn Sie eine dritte Möglichkeit bereitstellen möchten (z. B. .basicdass die .extraRegeln weiterhin gelten sollten), müssen Sie .basic-extramöglicherweise eine andere Klasse erfinden , die dies ausdrücklich vorsieht.

VoteyDisciple
quelle

2

Dies kann getan werden, aber Sie müssen mit Ihren Selektoren ein wenig kreativ werden. Mithilfe von Attributselektoren können Sie Dinge wie "beginnt mit", "endet mit", "enthält" usw. angeben. Siehe Beispiel unten mit demselben Markup, jedoch mit Attributselektoren.

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

Erweitern Sie das Snippet

TravisV
quelle

Wie gebe ich die Reihenfolge der CSS-Klassen an?

Antworten: