Heim >Web-Frontend >CSS-Tutorial >Wie wähle ich in CSS ein Element direkt vor einem anderen Element aus?

Wie wähle ich in CSS ein Element direkt vor einem anderen Element aus?

Patricia Arquette
Patricia ArquetteOriginal
2024-10-29 05:50:31520Durchsuche

How to Select an Element Immediately Before Another Element in CSS?

Den Unterschied zwischen div p und div ~ p verstehen

In CSS-Selektoren wählen sowohl der Plus- ( ) als auch der Tilde-Operator (~) aus Geschwisterelemente eines angegebenen Elements. Ihr Verhalten unterscheidet sich jedoch je nach Position des Elements relativ zu seinem Geschwister.

div p (Adjacent Sibling Selector)

Dieser Selektor entspricht allen

Elemente, die unmittelbar nach einem

Element. Zum Beispiel:

div + p {
  color: red;
}

In diesem Fall wird nur der erste Absatz, der auf jedes

folgt, verwendet. wird roten Text haben.

div ~ p (Allgemeiner Geschwisterselektor)

Dieser Selektor entspricht allen

Elemente, denen ein

vorangestellt ist Element, unabhängig von ihrer Position. Zum Beispiel:

div ~ p {
  color: blue;
}

In diesem Fall werden alle Absätze, die nach einem

Das Element hat blauen Text.

Klärung der Frage

Die Frage fragt nach einem Selektor, der ein Element auswählt, das unmittelbar vor einem bestimmten Element platziert wird. Dies kann mit den Selektoren div p oder div ~ p nicht erreicht werden.

Angrenzender Geschwisterselektor für vorhergehende Elemente

Um ein Element auszuwählen, das unmittelbar vor einem anderen Element liegt, müssen Sie kann den benachbarten Geschwisterselektor in umgekehrter Reihenfolge verwenden:

X Y

In dieser Syntax ist X das vorhergehende Element und Y ist das Thema des Selektors. Zum Beispiel:

p + ul {
  color: green;
}

Dieser Selektor wendet grünen Text nur auf die erste ungeordnete Liste nach jedem Absatz an.

Das obige ist der detaillierte Inhalt vonWie wähle ich in CSS ein Element direkt vor einem anderen Element aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn