Różnica między selektorami div + p (plus) i div ~ p (tylda)

Sposób, w jaki to określa w3schools , brzmi tak samo.

Dokumentacja CSS W3Schools

div + p
Wybiera wszystkie <p>elementy, które są umieszczane bezpośrednio po <div>elementach

div ~ p
Wybiera każdy <p>element poprzedzony <div>elementem

Jeśli <p>element znajduje się bezpośrednio po <div>elemencie, czy nie oznacza to, że <p>element jest poprzedzony <div>elementem?

W każdym razie szukam selektora, w którym mogę wybrać element znajdujący się bezpośrednio przed danym elementem.

Sąsiednie selektory rodzeństwa X + Y

Sąsiednie selektory rodzeństwa mają następującą składnię: E1 + E2, gdzie E2 jest tematem selektora. Selektor pasuje, jeśli E1 i E2 mają tego samego rodzica w drzewie dokumentu, a E1 bezpośrednio poprzedza E2, ignorując węzły nieelementowe (takie jak węzły tekstowe i komentarze).

ul + p {
   color: red;
}

W tym przykładzie wybierze tylko ten element, który jest bezpośrednio poprzedzony poprzednim elementem. W takim przypadku tylko pierwszy akapit po każdym ul będzie miał czerwony tekst.

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>

Ogólne selektory rodzeństwa X ~ Y

Kombinator ~ oddziela dwa selektory i dopasowuje drugi element tylko wtedy, gdy jest poprzedzony pierwszym i oba mają wspólnego rodzica.

ul ~ p {
   color: red;
}

Ten kombinator rodzeństwa jest podobny do X + Y, jednak jest mniej rygorystyczny. Podczas gdy sąsiedni selektor (ul + p) wybierze tylko pierwszy element, który jest bezpośrednio poprzedzony poprzednim selektorem, ten jest bardziej uogólniony. Wybierze, nawiązując do powyższego przykładu, dowolne elementy p, o ile będą następować po ul.

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>

Źródło

code.tutsplus

Ogólne selektory rodzeństwa MDN

Sąsiednie selektory rodzeństwa w3

Jeśli <p>element znajduje się bezpośrednio po <div>elemencie, czy nie oznacza to, że <p>element jest poprzedzony <div>elementem?

To jest poprawne. Innymi słowy, div + pjest podzbiorem z div ~ p- cokolwiek dopasowane dawna jest również dopasowane przez ten ostatni, z konieczności.

Różnica między +i ~polega na tym, że ~pasuje do wszystkich następnych rodzeństwa, niezależnie od ich bliskości od pierwszego elementu, o ile oboje mają tego samego rodzica.

Oba te punkty są najbardziej zwięźle zilustrowane na jednym przykładzie, w którym każda reguła stosuje inną właściwość. Zauważ, że pta następująca bezpośrednio po divma zastosowane obie reguły:

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>

W każdym razie szukam selektora, w którym mogę wybrać element znajdujący się bezpośrednio przed danym elementem.

Niestety jeszcze takiego nie ma .

rozważ ten przykład:

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) Sąsiednie selektory rodzeństwa (S1 + S2)

Sąsiedni selektor równorzędny służy do wybierania określonego elementu, który znajduje się bezpośrednio obok innego określonego elementu. Oba elementy powinny być na tym samym poziomie.

div + p {
    color:red;
}

Przykład sąsiednich selektorów rodzeństwa

2) Ogólne selektory rodzeństwa (S1 ~ S2)

Ogólny selektor rodzeństwa służy do wybierania wszystkich określonych elementów równorzędnych innego określonego elementu.

div ~ p {
   color:red;
}

Przykład ogólnych selektorów rodzeństwa

Selektory Adjacent Sibling (S1 + S2) vs General Sibling (S1 ~ S2):

Selektor sąsiadującego rodzeństwa (S1 + S2) wybiera tylko bezpośredni element siostrzany, ale selektor ogólnego rodzeństwa (S1 ~ S2) wybiera wszystkie elementy rodzeństwa innego określonego elementu. W obu przypadkach oba elementy (S1 i S2) powinny być na tym samym poziomie.

Pozostałe selektory są wyjaśnione tutaj: https://www.csssolid.com/35-css-selectors-to-remember.html