Wie funktioniert das Pluszeichen ( ) im CSS Adjacent Sibling Combinator?

CSS-Kombinator für benachbarte Geschwister: Das Pluszeichen verstehen

In CSS wird das Pluszeichen ( ) als Kombinator für benachbarte Geschwister verwendet. Dies bedeutet, dass Elemente ausgewählt werden, die unmittelbar auf ein bestimmtes Element folgen.

Beispiel:

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

In dieser Regel zielt der h2-p-Selektor auf alle p-Elemente ab, die direkt kommen nach einem h2-Element.

So funktioniert es:

Der benachbarte Geschwisterkombinator stellt sicher, dass das ausgewählte Element:

• dem vorhergehenden Element folgt sofort ohne dazwischenliegende Elemente.
• Teilt das gleiche übergeordnete Element.

Abbildung:

Beachten Sie die folgende HTML-Struktur:

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

Ergebnisse:

• Ausgewählt: Das erste p-Element, da es direkt auf ein h2-Element folgt.
• Nicht ausgewählt: Das zweite p-Element, da es nicht unmittelbar auf ein h2-Element folgt.
• Nicht ausgewählt: Das p-Element innerhalb des Blockzitats, da ein h2-Element nicht unmittelbar folgt. t steht innerhalb des Blockzitats davor.

Verwendung:

Der angrenzende Geschwisterkombinator ist nützlich, um bestimmte Sequenzen von Elementen innerhalb eines Dokuments zu formatieren, zum Beispiel:

• Visuell unterschiedliche Absätze darstellen, die auf Überschriften folgen.
• Alternative Zeilen in einer Tabelle hervorheben.
• Dropdown-Menüs erstellen, die neben Navigationslinks liegen.

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