Was bewirkt das \' \'-Symbol in CSS-Geschwisterselektoren?-CSS-Tutorial-php.cn

Was bewirkt das \' \'-Symbol in CSS-Geschwisterselektoren?

Barbara Streisand

Freigeben： 2024-10-28 21:33:30

Original

874 Leute haben es durchsucht

What does the ' ' symbol do in CSS sibling selectors?

Die Bedeutung von ' ' in CSS-Geschwisterselektoren

In CSS stellt das Symbol ' ' den benachbarten Geschwisterkombinator dar. Es wählt ein Element aus, das unmittelbar nach einem anderen bestimmten Element erscheint. Dieser Selektor ist nützlich, um bestimmte Elemente in einer bestimmten Reihenfolge anzusprechen.

Beispiel:

Beachten Sie die folgende CSS-Regel:

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

Nach dem Login kopieren

Die Regel wendet die angegebenen Stile auf alle

-Elemente an. Element, das direkt auf ein

-Element folgt. Element. Es hätte keinen Einfluss auf

Elemente, die nach anderen Elementen stehen, wie zum Beispiel

oder Tags.

Abbildung:

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

Nach dem Login kopieren

Ausgewählt (1): Das erste
Das Element kommt unmittelbar nach einem
Element.
Nicht ausgewählt (2): Das zweite
Das Element folgt nicht direkt einem
-Element. Element; stattdessen folgt ein
Element.
Nicht ausgewählt (3): Das
Das Element innerhalb des Blockquotes hat kein
Element unmittelbar davor.

Hinweis:

Der benachbarte Geschwisterkombinator unterscheidet sich vom allgemeinen Geschwisterkombinator „~“, der Elemente auswählt, die einem anderen Element folgen irgendwo innerhalb desselben übergeordneten Elements.

Das obige ist der detaillierte Inhalt vonWas bewirkt das \' \'-Symbol in CSS-Geschwisterselektoren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!