Diferencia entre los selectores div + p (más) y div ~ p (tilde)

La forma en que w3schools lo expresa , suenan igual.

Referencia CSS de W3Schools

div + p
Selecciona todos los <p>elementos que se colocan inmediatamente después de los <div>elementos.

div ~ p
Selecciona todos los <p>elementos que están precedidos por un <div>elemento.

Si un <p>elemento está inmediatamente después de un <div>elemento, ¿no significa eso que el <p>elemento está precedido por un <div>elemento?

De todos modos, estoy buscando un selector donde pueda seleccionar un elemento que se coloca inmediatamente antes de un elemento dado.

Selectores de hermanos adyacentes X + Y

Los selectores de hermanos adyacentes tienen la siguiente sintaxis: E1 + E2, donde E2 es el sujeto del selector. El selector coincide si E1 y E2 comparten el mismo padre en el árbol del documento y E1 precede inmediatamente a E2, ignorando los nodos que no son elementos (como los nodos de texto y los comentarios).

ul + p {
   color: red;
}

En este ejemplo, seleccionará solo el elemento que está inmediatamente precedido por el elemento anterior. En este caso, solo el primer párrafo después de cada ul tendrá texto en rojo.

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>

Selectores generales de hermanos X ~ Y

El combinador ~ separa dos selectores y hace coincidir el segundo elemento solo si está precedido por el primero, y ambos comparten un padre común.

ul ~ p {
   color: red;
}

Este combinador hermano es similar a X + Y, sin embargo, es menos estricto. Mientras que un selector adyacente (ul + p) solo seleccionará el primer elemento que está inmediatamente precedido por el selector anterior, este es más generalizado. Seleccionará, en referencia a nuestro ejemplo anterior, cualquier p elementos, siempre que sigan a 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>

Fuente

code.tutsplus

Selectores generales de hermanos MDN

Selectores de hermanos adyacentes w3

Si un <p>elemento está inmediatamente después de un <div>elemento, ¿no significa eso que el <p>elemento está precedido por un <div>elemento?

Esto es correcto. En otras palabras, div + pes un subconjunto adecuado de div ~ p: cualquier cosa que coincida con el primero también se corresponde con el segundo, por necesidad.

La diferencia entre +y ~es que ~coincide con todos los hermanos siguientes independientemente de su proximidad con el primer elemento, siempre que ambos compartan el mismo padre.

Ambos puntos se ilustran de manera más sucinta con un solo ejemplo, donde cada regla aplica una propiedad diferente. Observe que el pque sigue inmediatamente divtiene aplicadas ambas reglas:

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>

De todos modos, estoy buscando un selector donde pueda seleccionar un elemento que se coloca inmediatamente antes de un elemento dado.

Desafortunadamente, todavía no hay uno .

considere este ejemplo:

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) Selectores de hermanos adyacentes (S1 + S2)

El selector de hermanos adyacentes se utiliza para seleccionar un elemento especificado que está inmediatamente al lado de otro elemento especificado. Ambos elementos deben estar en el mismo nivel.

div + p {
    color:red;
}

Ejemplo de selectores de hermanos adyacentes

2) Selectores generales de hermanos (S1 ~ S2)

El selector general de hermanos se utiliza para seleccionar todos los elementos hermanos especificados de otro elemento especificado.

div ~ p {
   color:red;
}

Ejemplo de selectores generales de hermanos

Selectores de hermano adyacente (S1 + S2) vs hermano general (S1 ~ S2):

El selector de hermanos adyacentes (S1 + S2) selecciona solo el elemento hermano inmediato, pero el selector de hermanos generales (S1 ~ S2) selecciona todos los elementos hermanos de otro elemento especificado. Ambos casos, ambos elementos (S1 y S2) deben estar en el mismo nivel.

Los selectores restantes se explican aquí: https://www.csssolid.com/35-css-selectors-to-remember.html