So wie w3schools , klingen sie gleich.
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.
css
css-selectors
user4055428
quelle
quelle
+
ist das unmittelbar nächstep
Element und~
ist alle nächstenp
Elemente (nach jedemdiv
Element)before
. unmöglich. nur mit Javascript. Sie müssen danach suchen und nach allenbefore
Klassen, auf die Sie in Ihrem CSS abzielen.Antworten:
Benachbarte Geschwisterselektoren X + Y.
Code-Snippet anzeigen
Allgemeine Geschwisterselektoren X ~ Y.
Code-Snippet anzeigen
Quelle
code.tutsplus
Allgemeine Geschwisterselektoren MDN
Benachbarte Geschwisterselektoren w3
quelle
Das ist richtig. Mit anderen Worten,
div + p
ist eine richtige Teilmenge vondiv ~ 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
p
unmittelbar folgendediv
Regel beide Regeln angewendet werden:Leider gibt es noch keinen .
quelle
Betrachten Sie dieses Beispiel:
quelle
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.
Beispiel für benachbarte Geschwisterselektoren
2) Allgemeine Geschwisterselektoren (S1 ~ S2)
Mit der allgemeinen Geschwisterauswahl werden alle angegebenen Geschwisterelemente eines anderen angegebenen Elements ausgewählt.
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
quelle