Wie funktioniert der CSS Adjacent Sibling Combinator ( )?

Den CSS-Kombinator für benachbarte Geschwister verstehen:

In CSS wird das Symbol als Kombinator für benachbarte Geschwister bezeichnet. Damit können Sie auf bestimmte HTML-Elemente abzielen, die nebeneinander positioniert sind.

Wie funktioniert der Kombinator?

Der Kombinator stellt sicher, dass das Zielelement (das zweite) ausgewählt wird Element im Selektor) muss unmittelbar auf das erste Element (das erste Element im Selektor) folgen. Zwischen den beiden Elementen sollten sich keine anderen Elemente befinden, damit der Selektor übereinstimmt.

Beispiel: h2 p

Beachten Sie die folgende CSS-Regel:

<code class="css">h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}</code>

Diese Regel zielt auf alle p-Elemente ab, die an h2-Elemente angrenzen. Mit anderen Worten, es betrifft nur p-Elemente, die unmittelbar nach h2-Elementen erscheinen.

Abbildung

Nehmen Sie diesen HTML-Code als Beispiel:

<code class="html"><h2>Headline!</h2>
<p>The first paragraph.</p> <!-- Selected -->
<p>The second paragraph.</p> <!-- Not selected -->

<h2>Another headline!</h2>
<blockquote>
    <p>A quotation.</p> <!-- Not selected -->
</blockquote></code>

Nur ​​das erste p-Element wird vom h2-p-Selektor ausgewählt, da es an ein h2 angrenzt. Das zweite p-Element wird nicht ausgewählt, da es vom h2 durch ein

getrennt ist. Das p-Element innerhalb des Blockzitats wird ebenfalls nicht ausgewählt, da ihm innerhalb desselben Blocks kein h2-Element unmittelbar vorangeht.

Unterschied vom General Sibling Combinator ~

Im Gegensatz dazu Der Kombinator, der allgemeine Geschwisterkombinator, erfordert keine benachbarte Platzierung. Es wählt Elemente aus, die Geschwister sind, unabhängig von ihrer Position zueinander.

Das obige ist der detaillierte Inhalt vonWie funktioniert der CSS Adjacent Sibling Combinator ( )?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!