Wie kann ich mithilfe von CSS-Selektoren auf Elemente mit mehreren Klassen abzielen?

CSS-Selektoren für Elemente mit mehreren Klassen

Die Bestimmung von Möglichkeiten, Elemente mit bestimmten Klassenkombinationen in CSS anzusprechen, kann eine häufige Anforderung in der Webentwicklung sein . Stellen Sie sich dieses Szenario vor, in dem drei div-Elemente unterschiedliche Klassenkombinationen haben:

<br><div><div class="foo bar">Hello World</div><br>&lt ;div>

Die Aufgabe besteht darin, das zweite Element auszuwählen, das sowohl foo als auch bar enthält Klassen.

Lösung: Verkettete Klassenselektoren

Um dies zu erreichen, bieten CSS-Selektoren eine einfache Lösung: die Verkettung von Klassenselektoren. Schreiben Sie einfach die Klassennamen ohne Leerzeichen zusammen, wie in diesem Code:

.foo.bar {
  /* Styles for elements with both foo and bar classes */
}

Dieser Selektor gilt nur für das zweite div-Element im bereitgestellten HTML, da es das einzige Element ist, das beide Klassen hat .

Vorsicht für Internet Explorer 6

Es ist jedoch wichtig zu beachten, dass Internet Explorer 6 über eine verfügt Vorbehalt, wenn es um verkettete Klassenselektoren geht. Es erkennt nur den letzten Klassenselektor in der Kette und ignoriert alle vorhergehenden. Im obigen Beispiel wendet IE6 die Stile nur auf Elemente mit der bar-Klasse an, nicht auf Elemente, die auch die foo-Klasse haben.

Beispiel

Bedenken Sie Folgendes Snippet:

*{
  color:black;
}

.foo.bar {
  color:red;
}

<div>

In diesem Szenario wenden Nicht-IE6-Browser die rote Farbe auf das zweite Div an, während IE6 wird es auf das dritte Div anwenden, da es nur die Bar-Klasse berücksichtigt. Es kann besonders wichtig sein, dieses Verhalten zu beachten, wenn die Unterstützung älterer Browser erforderlich ist.

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