Wie ziele ich mit CSS-Selektoren auf Elemente mit mehreren Klassen ab?

CSS-Selektor zum Targeting von Elementen mit mehreren Klassen

Bei der Arbeit mit CSS ist es entscheidend, festzustellen, ob ein Element bestimmte Kriterien erfüllt. Ein solches Szenario ist die Identifizierung von Elementen, die zu zwei oder mehr spezifischen Klassen gehören. Dieser Artikel bietet eine einfache Lösung für dieses Problem sowie Überlegungen zur Browserkompatibilität.

Um ein Element mit mehreren Klassen auszuwählen, verwenden Sie die CSS-Klassenauswahlsyntax. Verketten Sie einfach die Klassennamen miteinander, ohne sie durch ein Leerzeichen zu trennen. Um beispielsweise ein Element mit den Klassen „foo“ und „bar“ auszuwählen:

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

Die Interpreter von Internet Explorer 6 haben die Klassenselektoren jedoch unterschiedlich verkettet. Für diesen Browser wird nur der letzte Klassenselektor erkannt. Um die Kompatibilität sicherzustellen, sollten Sie den folgenden Code verwenden:

* {
  color: black;
}

.foo.bar {
  color: red;
}

Dieser Code weist Elementen mit den Klassen „foo“ und „bar“ die Farbe „Rot“ zu, während alle anderen Elemente die Standardfarbe „Schwarz“ beibehalten. Farbe. Die Implementierung dieses Ansatzes ermöglicht ein einheitliches Design in verschiedenen Browsern, einschließlich IE6.

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