Heim  >  Artikel  >  Web-Frontend  >  Wie zielt der \" \"-Kombinator in CSS auf Elemente ab, die unmittelbar auf Geschwister folgen?

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

Barbara Streisand
Barbara StreisandOriginal
2024-10-30 20:29:30280Durchsuche

How Does the

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!

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