Elemente mit mehreren Klassen unter Verwendung von CSS -Selektoren

Wenn Sie mit HTML und CSS arbeiten, müssen Sie auf Situationen ausgewählt werden, in denen Sie auf Elements basierende Auswahl von Elementen auswählen müssen auf den Werten bestimmter Klassen. Eine allgemeine Anforderung besteht darin, Elemente mit mehreren Klassen auszuwählen, die ihnen zugewiesen sind.

Frage:

drei Divs mit den folgenden Klassen:

Hello Foo
Hello World
Hello Bar

Wie können Sie CSS schreiben, um nur das zweite Element (mit den Klassen "Foo Bar" mit CSS -Selektoren auszuwählen?

Antwort:

, um Elemente mit mehreren Klassen auszuwählen, einfach die Klassenauswahl ohne Platz dazwischen ketten. In diesem Beispiel wäre der CSS -Code:

.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}

Dieser Selektor wendet Stile auf die zweite DIV an, da es das einzige Element ist, das sowohl die "Foo" als auch die "Bar" -Klasse hat.

zusätzliche Notiz :

ältere Browser wie Internet Explorer 6 interpretieren möglicherweise nicht korrekt angekettete Klassenauswahl. IE6 wird nur den letzten Klassenwählers lesen und die anderen ignorieren. Um die Kompatibilität mit IE6 zu gewährleisten, sollten Sie vermeiden, dass die Selektoren der verketteten Klassen verwendet werden und stattdessen spezifischere Selektoren verwenden, wie z. B.

div.foo.bar {
  /* Styles for element(s) with foo AND bar classes */
}