Unterschied zwischen den Selektoren div + p (plus) und div ~ p (Tilde)

87

So wie w3schools , klingen sie gleich.

CSS-Referenz von W3Schools

div + p
Wählt alle aus <p> Elemente aus, die unmittelbar nach den <div>Elementen platziert werden

div ~ p
Wählt jeden aus <p> Element aus, dem ein <div>Element vorangestellt ist

Wenn ein <p>Element unmittelbar nach a steht<div> Element befindet, bedeutet dies nicht, dass dem <p>Element ein <div>Element vorangestellt ist?

Wie auch immer, ich suche einen Selektor, mit dem ich ein Element auswählen kann, das unmittelbar vor einem bestimmten Element steht.

user4055428
quelle
5
+ist das unmittelbar nächste pElement und ~ist alle nächsten pElemente (nach jedem divElement)
vsync
2
du kannst nicht tun before. unmöglich. nur mit Javascript. Sie müssen danach suchen und nach allen beforeKlassen, auf die Sie in Ihrem CSS abzielen.
vsync
7
Versuchen Sie auch, w3schools zu vermeiden :) w3fools.com
Alex Char
3
Sehen Sie dies für eine visuelle Erklärung
Marc B
2
Eine interessante Sache an dieser Frage ist, dass sie vorher nicht gestellt wurde. Zumindest konnte ich auf SO keine ähnliche Frage finden.
Hashem Qolami

Antworten:

118

Benachbarte Geschwisterselektoren X + Y.

Benachbarte Geschwisterselektoren haben die folgende Syntax: E1 + E2, wobei E2 Gegenstand des Selektors ist. Der Selektor stimmt überein, wenn E1 und E2 im Dokumentbaum dasselbe übergeordnete Element haben und E1 unmittelbar vor E2 steht, wobei Nicht-Element-Knoten (wie Textknoten und Kommentare) ignoriert werden.

ul + p {
   color: red;
}

In diesem Beispiel wird nur das Element ausgewählt, dem das vorherige Element unmittelbar vorausgeht. In diesem Fall hat nur der erste Absatz nach jeder Ul einen roten Text.

Allgemeine Geschwisterselektoren X ~ Y.

Der Kombinator ~ trennt zwei Selektoren und stimmt nur dann mit dem zweiten Element überein, wenn ihm das erste vorangestellt ist und beide ein gemeinsames übergeordnetes Element haben.

ul ~ p {
   color: red;
}

Dieser Geschwisterkombinator ähnelt X + Y, ist jedoch weniger streng. Während ein benachbarter Selektor (ul + p) nur das erste Element auswählt, dem der vorherige Selektor unmittelbar vorausgeht, ist dieses Element allgemeiner. In unserem obigen Beispiel werden alle p-Elemente ausgewählt, solange sie einer ul folgen.

Quelle

code.tutsplus

Allgemeine Geschwisterselektoren MDN

Benachbarte Geschwisterselektoren w3

Alex Char
quelle
6
Diese Antwort ist nichts weiter als ein Zitat eines anderen Artikels, ohne den Versuch, die jeweilige Frage zu beantworten. Die angegebenen Beispiele sind auch nicht sehr gut darin, die Frage zu beantworten.
BoltClock
1
@ BoltClock danke ich verstehe deinen Punkt. Ich freue mich immer über Feedback von Ihnen. Aber ich denke, meine Antwort erklärt OP, was der Unterschied zwischen diesen Selektoren ist.
Alex Char
Das ist richtig. Obwohl es die Frage nicht ganz anspricht, macht es einen vernünftigen Job, um den Unterschied zwischen den beiden Selektoren zu veranschaulichen.
BoltClock
@AlexChar Um den Unterschied zwischen diesen beiden besser zu zeigen, sollten Sie das gleiche HTML-Beispiel für X + Y und X ~ Y verwenden.
thecoolmacdude
@thecoolmacdude Fertig. Danke für die Rückmeldung. Jetzt denke ich ist klarer.
Alex Char
22

Wenn sich ein <p>Element unmittelbar nach einem<div> Element befindet, bedeutet dies nicht, dass dem <p>Element ein <div>Element vorangestellt ist?

Das ist richtig. Mit anderen Worten, div + pist eine richtige Teilmenge von div ~ p- alles, was mit dem ersteren übereinstimmt, ist es auch übereinstimmt, stimmt notwendigerweise mit dem letzteren überein.

Der Unterschied zwischen +und ~ist das~ alle folgenden Geschwister unabhängig von ihrer Nähe zum ersten Element übereinstimmen, sofern beide denselben Elternteil haben.

Diese beiden Punkte werden am prägnantesten anhand eines einzelnen Beispiels veranschaulicht, bei dem jede Regel eine andere Eigenschaft anwendet. Beachten Sie, dass auf die punmittelbar folgende divRegel beide Regeln angewendet werden:

div + p {
    color: red;
}

div ~ p {
    background-color: yellow;
}
<section>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>
<section>
    No div
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
</section>

Wie auch immer, ich suche einen Selektor, mit dem ich ein Element auswählen kann, das unmittelbar vor einem bestimmten Element steht.

Leider gibt es noch keinen .

BoltClock
quelle
7

Betrachten Sie dieses Beispiel:

p + p { /* the first p immediately after a preceding p */
   color: red; 
} 

p ~ p { /* all p's after a preceding p */
   font-weight: bold;
} 
<div>
   	<p>1</p>
	<div>separator</div>
   	<p>2</p> <!-- only ~ is applied here -->
  	<p>3</p> <!-- both + and ~ are applied here -->
</div>

Mina Luke
quelle
0

1) Benachbarte Geschwisterselektoren (S1 + S2)

Der benachbarte Geschwister-Selektor wird verwendet, um ein angegebenes Element auszuwählen, das sich unmittelbar neben einem anderen angegebenen Element befindet. Beide Elemente sollten sich auf derselben Ebene befinden.

div + p {
    color:red;
}

Beispiel für benachbarte Geschwisterselektoren

2) Allgemeine Geschwisterselektoren (S1 ~ S2)

Mit der allgemeinen Geschwisterauswahl werden alle angegebenen Geschwisterelemente eines anderen angegebenen Elements ausgewählt.

div ~ p {
   color:red;
}

Beispiel für allgemeine Geschwisterauswahl

Selektoren für benachbarte Geschwister (S1 + S2) und allgemeine Geschwister (S1 ~ S2):

Der Selektor für benachbarte Geschwister (S1 + S2) wählt nur das unmittelbare Geschwisterelement aus, während der Selektor für allgemeine Geschwister (S1 ~ S2) alle Geschwisterelemente eines anderen angegebenen Elements auswählt. In beiden Fällen sollten sich beide Elemente (S1 und S2) auf derselben Ebene befinden.

Die verbleibenden Selektoren werden hier erläutert: https://www.csssolid.com/35-css-selectors-to-remember.html

Selva
quelle