Was ist der Unterschied zwischen den CSS-Selektoren „div p“ und „div ~ p“?

Unterscheidung zwischen 'div p'- und 'div ~ p'-Selektoren

In der Welt von CSS werden benachbarte Geschwisterselektoren wie 'div p' verwendet ' und 'div ~ p' werden verwendet, um auf Elemente abzuzielen, die direkt nach oder vor einem bestimmten Element positioniert sind. Allerdings kann es verwirrend sein, den feinen Unterschied zwischen diesen Selektoren zu verstehen.

'div p': Immediate Sibling

Der 'div p'-Selektor zielt speziell auf Elemente ab ('p '), die direkt an 'div'-Elemente angrenzen. Das heißt, wenn ein „p“-Element unmittelbar nach einem „div“-Element erscheint, wird es von dieser Regel ausgewählt. Wenn jedoch andere Elemente (wie Überschriften, Listen oder sogar Text) zwischen den Elementen „div“ und „p“ erscheinen, gilt die Regel nicht.

'div ~ p': Alle Geschwister mit Ausnahme von „Immediate“

Im Gegensatz dazu zielt der Selektor „div ~ p“ auf alle „p“-Elemente ab, die nach einem „div“-Element erscheinen, unabhängig davon, ob dazwischenliegende Elemente vorhanden sind. Während also der „div p“-Selektor nur das erste „p“-Element direkt nach einem „div“ auswählt, würde der „div ~ p“-Selektor auch alle nachfolgenden „p“-Elemente auswählen.

Ein Element vor einem anderen auswählen

Wenn Ihr Ziel darin besteht, ein Element anzuvisieren, das sich direkt vor einem bestimmten Element befindet, würde keiner dieser benachbarten Geschwisterselektoren ausreichen. Stattdessen müssten Sie den „Selektor für benachbarte Geschwister mit dem Pluszeichen“ („X Y“) verwenden.

Syntax: E1 E2

Erklärung :

• E1 stellt das Element dar, das Sie abgleichen möchten.
• E2 stellt das Element dar, das vor E1 stehen sollte.

In Ihrem spezifischen Szenario Wenn Sie ein Element auswählen möchten, das direkt vor „div“-Elementen platziert wird, können Sie das folgende CSS verwenden:

<code class="css">E + div {
    ...
}</code>

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen den CSS-Selektoren „div p“ und „div ~ p“?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!