Wie kann ich mithilfe von CSS-Selektoren ein HTML-Element mit mehreren Klassen auswählen?

Targeting von Elementen mit mehreren Klassen mithilfe von CSS-Selektoren

Bei der Arbeit mit HTML und CSS können Situationen auftreten, in denen Sie Elemente basierend auswählen müssen auf den Werten bestimmter Klassen. Eine häufige Anforderung besteht darin, Elemente auszuwählen, denen mehrere Klassen zugewiesen sind.

Frage:

Gegeben sind drei Divs mit den folgenden Klassen:

<div class="foo">Hello Foo</div>
<div class="foo bar">Hello World</div>
<div class="bar">Hello Bar</div>

Wie können Sie CSS schreiben, um mithilfe von CSS nur das zweite Element (mit den „foo bar“-Klassen) auszuwählen? Selektoren?

Antwort:

Um Elemente mit mehreren Klassen auszuwählen, verketten Sie einfach die Klassenselektoren ohne Leerzeichen dazwischen. In diesem Beispiel wäre der CSS-Code:

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

Dieser Selektor wendet Stile auf das zweite Div an, da es das einzige Element ist, dem sowohl die Klassen „foo“ als auch „bar“ zugewiesen sind .

Zusätzlicher Hinweis:

Ältere Browser wie Internet Explorer 6 interpretieren verkettete Klassen möglicherweise nicht richtig Selektoren. IE6 liest nur den letzten Klassenselektor und ignoriert die anderen. Um die Kompatibilität mit IE6 sicherzustellen, sollten Sie die Verwendung verketteter Klassenselektoren vermeiden und stattdessen spezifischere Selektoren verwenden, wie zum Beispiel:

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

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS-Selektoren ein HTML-Element mit mehreren Klassen auswählen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!