Разница между селекторами div + p (плюс) и div ~ p (тильда)

То, как это формулирует w3schools , звучит одинаково.

Справочник W3Schools по CSS

div + p
Выбирает все <p>элементы, которые помещаются сразу после <div>элементов

div ~ p
Выбирает каждый <p>элемент, которому предшествует <div>элемент

Если <p>элемент находится сразу после <div>элемента, разве это не означает, что <p>элементу предшествует <div>элемент?

Во всяком случае, я ищу селектор, в котором я могу выбрать элемент, который находится непосредственно перед данным элементом.

Смежные одноуровневые селекторы X + Y

Соседние одноуровневые селекторы имеют следующий синтаксис: E1 + E2, где E2 является предметом селектора. Селектор совпадает, если E1 и E2 имеют одного и того же родителя в дереве документа, а E1 непосредственно предшествует E2, игнорируя неэлементные узлы (например, текстовые узлы и комментарии).

ul + p {
   color: red;
}

В этом примере он выберет только элемент, которому непосредственно предшествует предыдущий элемент. В этом случае красный текст будет только в первом абзаце после каждого ul.

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>

Общие родственные селекторы X ~ Y

Комбинатор ~ разделяет два селектора и соответствует второму элементу, только если ему предшествует первый и оба имеют общего родителя.

ul ~ p {
   color: red;
}

Этот родственный комбинатор похож на X + Y, но менее строг. В то время как соседний селектор (ul + p) будет выбирать только первый элемент, которому непосредственно предшествует предыдущий селектор, этот более общий. Он выберет, ссылаясь на наш пример выше, любые элементы p, если они следуют за 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>

Источник

code.tutsplus

Общие родственные селекторы MDN

Смежные одноуровневые селекторы w3

Если <p>элемент находится сразу после <div>элемента, разве это не означает, что <p>элементу предшествует <div>элемент?

Это верно. Другими словами, div + pэто собственное подмножество из div ~ p- ничего подкреплялись прежний также соответствует последним, по необходимости.

Разница между +и ~заключается в том, что ~соответствует всем следующим братьям и сестрам независимо от их близости от первого элемента, если они оба имеют одного и того же родителя.

Оба эти момента наиболее кратко проиллюстрированы на одном примере, где каждое правило применяет разные свойства. Обратите внимание, что к тому, pкоторый следует сразу за div, применяются оба правила:

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>

Во всяком случае, я ищу селектор, в котором я могу выбрать элемент, который находится непосредственно перед данным элементом.

К сожалению, пока нет .

рассмотрим этот пример:

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) Смежные селекторные элементы (S1 + S2)

Селектор смежных родственников используется для выбора указанного элемента, который находится непосредственно рядом с другим указанным элементом. Оба элемента должны быть на одном уровне.

div + p {
    color:red;
}

Пример смежных одноуровневых селекторов

2) Общие селекторы братьев и сестер (S1 ~ S2)

Общий одноуровневый селектор используется для выбора всех указанных одноуровневых элементов другого указанного элемента.

div ~ p {
   color:red;
}

Пример общих одноуровневых селекторов

Селекторы смежных братьев (S1 + S2) и общих братьев и сестер (S1 ~ S2):

Селектор смежных родственных элементов (S1 + S2) выбирает только непосредственный родственный элемент, но селектор общего родственного брата (S1 ~ S2) выбирает все родственные элементы другого указанного элемента. В обоих случаях оба элемента (S1 и S2) должны быть на одном уровне.

Остальные селекторы объяснены здесь: https://www.csssolid.com/35-css-selectors-to-remember.html