Verketten Sie beide Klassenselektoren (ohne Leerzeichen dazwischen):
.foo.bar {
/* Styles for element(s) with foo AND bar classes */
}
Wenn Sie immer noch mit alten Browsern wie IE6 arbeiten müssen, beachten Sie, dass verkettete Klassenselektoren nicht korrekt gelesen werden: Stattdessen wird nur der letzte Klassenselektor ( .bar
in diesem Fall) gelesen , unabhängig davon, welche anderen Klassen Sie auflisten.
Betrachten Sie dieses CSS, um zu veranschaulichen, wie andere Browser und IE6 dies interpretieren:
* {
color: black;
}
.foo.bar {
color: red;
}
Die Ausgabe in unterstützten Browsern ist:
<div class="foo">Hello Foo</div> <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div> <!-- Not selected, black text [3] -->
Ausgabe auf IE6 ist:
<div class="foo">Hello Foo</div> <!-- Not selected, black text [1] -->
<div class="foo bar">Hello World</div> <!-- Selected, red text [2] -->
<div class="bar">Hello Bar</div> <!-- Selected, red text [2] -->
Fußnoten:
- Unterstützte Browser:
- Nicht ausgewählt, da dieses Element nur eine Klasse hat
foo
.
- Ausgewählte als dieses Element hat beiden Klassen
foo
und bar
.
- Nicht ausgewählt, da dieses Element nur eine Klasse hat
bar
.
- IE6:
- Nicht ausgewählt, da dieses Element keine Klasse hat
bar
.
- Ausgewählt, da dieses Element eine Klasse hat
bar
, unabhängig von anderen aufgelisteten Klassen.