Wie wählt der CSS-Kombinator benachbarte Geschwisterelemente aus?

Auswahl benachbarter Geschwister: Erkundung des CSS-Kombinators „ '“

In CSS übernimmt das Zeichen „ „ die Rolle des Kombinators benachbarter Geschwister . Mit diesem vielseitigen Operator können Sie einen Selektor angeben, der auf Elemente abzielt, denen ein bestimmtes Geschwisterelement unmittelbar vorangeht.

Um seine Funktionalität zu veranschaulichen, analysieren wir die folgende CSS-Regel:

h2 + p {
  font-size: 1.4em;
  font-weight: bold;
  color: #777;
}

Dies Die Regel zielt auf alle „p“-Elemente ab, die direkt auf einen „h2“-Header folgen. Elemente, die diese Bedingung erfüllen, erben die angegebenen Stileigenschaften, wie z. B. erhöhte Schriftgröße, Fettdruck und #777-Farbe.

Betrachten Sie die folgende HTML-Struktur als Beispiel:

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

Der CSS-Selektor „h2 p“ würde nur das erste „p“-Element auswählen, das unmittelbar neben dem „h2“-Header mit der Bezeichnung „Headline!“ liegt. Dies wird im Beispiel mit „[1]“ gekennzeichnet. Dem zweiten 'p'-Element hingegen steht nicht direkt ein 'h2' voran und es wird daher nicht als '[2]' ausgewählt.

Zusätzlich kann der benachbarte Geschwisterkombinator in Verbindung mit verwendet werden der allgemeine Geschwisterkombinator „~“, der eine flexiblere Zuordnung ermöglicht. Beispielsweise würde der Selektor „h2 ~ p“ mit jedem „p“-Element übereinstimmen, das nach einem „h2“-Header auftritt, unabhängig davon, ob es unmittelbar benachbart ist.

Im Wesentlichen ermöglicht der benachbarte Geschwisterkombinator in CSS die Funktion Sie können HTML-Elemente basierend auf ihrer Position relativ zu ihren Geschwistern präzise auswählen und so eine detaillierte Kontrolle über Stil und Layout ermöglichen.

Das obige ist der detaillierte Inhalt vonWie wählt der CSS-Kombinator benachbarte Geschwisterelemente aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!