Heim >Web-Frontend >CSS-Tutorial >So wählen Sie Elemente unmittelbar vor einem bestimmten Element aus: Verstehen Sie die benachbarten Geschwisterselektoren „ ' (Plus) und „~' (Tilde) in CSS?
So wählen Sie Elemente unmittelbar vor einem bestimmten Element aus: Verstehen Sie die benachbarten Geschwisterselektoren „ ' (Plus) und „~' (Tilde) in CSS?
- Mary-Kate OlsenOriginal
- 2024-10-26 18:30:301106Durchsuche
Benachbarte Geschwisterselektoren: Den Unterschied zwischen div p (Plus) und div ~ p (Tilde) verstehen
Beim Arbeiten mit CSS-Selektoren Es ist wichtig, den Unterschied zwischen den Selektoren div p (Plus) und div ~ p (Tilde) zu verstehen. Obwohl sie ähnlich klingen, unterscheiden sich ihre Auswirkungen erheblich.
div p (Plus) Selector
Der div p Selector wählt alle
Elemente, die unmittelbar nach
Elemente müssen die direkten Geschwister des vorhergehenden
div ~ p (Tilde)-Selektor
Im Gegensatz zum div p-Selektor wählt der div ~ p-Selektor alle
Elemente, denen
Elemente, die nach jedem
Auswahl des richtigen Selektors
Um Ihre Anfrage bezüglich der Auswahl von Elementen zu beantworten, die unmittelbar vor einem bestimmten Element platziert sind, sollten Sie die folgende Syntax verwenden:
E1 E2
Dieser Selektor entspricht den Elementen E2, denen die Elemente E1 unmittelbar vorangehen. In Ihrem Fall würden Sie div p verwenden, um
auszuwählen. Elemente, die benachbart sind und vorangehen
Beispiel
Betrachten Sie den folgenden HTML- und CSS-Code:
<code class="html"><div id="container">
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
<p>This will be red</p>
<p>This will be black</p>
<p>This will be black</p>
</div></code>
<code class="css">ul + p {
color: red;
}</code>
In diesem Beispiel wird nur das
Das obige ist der detaillierte Inhalt vonSo wählen Sie Elemente unmittelbar vor einem bestimmten Element aus: Verstehen Sie die benachbarten Geschwisterselektoren „ ' (Plus) und „~' (Tilde) in CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!