Wie zielt der \' \'-Kombinator in CSS auf Elemente ab, die unmittelbar auf Geschwister folgen?

Den „ “-Kombinator in CSS verstehen

CSS verwendet den „ “-Kombinator, um auf Elemente abzuzielen, die unmittelbar auf bestimmte Geschwister folgen. Beispielsweise wird in der Regel „h2 p“ nur das p-Element unmittelbar nach einem h2-Element von den angegebenen Stilen beeinflusst.

Visualisierung des Konzepts

Bedenken Sie der folgende HTML-Code:

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

<h2>Another headline!</h2>
<blockquote class="quote">
    <p>A quotation.</p> <!-- Not selected [3] -->
</blockquote></code>

Bei Anwendung des „h2 p“-Selektors:

• [1] Der erste Absatz (

  ) ist ausgewählt, weil es direkt auf ein h2-Element (

  ) folgt.

• [2] Der zweite Absatz (

  ) ist nicht ausgewählt, da er auf den ersten Absatz folgt. nicht das h2-Element.

• [3] Der Absatz innerhalb des Blockzitats (

  ) ist nicht ausgewählt, da im Blockzitat kein h2 davor steht.

Vergleich mit dem „~“-Kombinator

Der „ “-Kombinator wählt speziell nur Elemente aus, die unmittelbare Geschwister sind, im Gegensatz zum „~“-Kombinator, der alle Geschwisterelemente unabhängig von ihren auswählt Position. Beispielsweise würde „h2 ~ p“ beide Absätze im obigen HTML auswählen, während „h2 p“ nur den ersten Absatz auswählen würde.

Das obige ist der detaillierte Inhalt vonWie zielt der \' \'-Kombinator in CSS auf Elemente ab, die unmittelbar auf Geschwister folgen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!