Wie wähle ich in CSS ein Element direkt vor einem anderen Element aus?-CSS-Tutorial-php.cn

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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!

Quelle：php.cn

Vorheriger Artikel：Ist das HTML-Attribut „scoped“ tot? Die Geschichte eines Features, das es nie gab Nächster Artikel：## Wie behebe ich jQuery-Drag/Resize-Diskrepanzen mit der CSS-Transformationsskala?

Erklärung dieser Website

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

Neueste Artikel des Autors

Aktuelle Ausgaben

function_exists() kann die benutzerdefinierte Funktion nicht ermitteln Funktionstest () {Verwendung der Verwendung durch -Durch -Durch -Durch -Durch -Durch -Durc...

Aus 2024-04-29 11:01:01

2165

So zeigen Sie die mobile Version von Google Chrome an Hallo Lehrer, wie kann ich Google Chrome in eine mobile Version umwandeln?

Aus 2024-04-23 00:22:19

2313

Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.

Aus 2024-04-19 15:37:47

1950

Im übergeordneten Fenster erfolgt keine Ausgabe document.onclick = function(){ window.opener.document.write('Ich bin die Ausgabe des unter...