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

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.

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.

ul + p {
    color: red;
}

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

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.

ul ~ p {
  color: red;
}

<div id="container">
  <ul>
    <li>List Item
      <ul>
        <li>Child</li>
      </ul>
    </li>
    <li>List Item</li>
    <li>List Item</li>
    <li>List Item</li>
  </ul>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
  <p>This will be red.</p>
</div>

Quelle

code.tutsplus

Allgemeine Geschwisterselektoren MDN

Benachbarte Geschwisterselektoren w3

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 .

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>

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