Diferença entre os seletores div + p (mais) e div ~ p (til)

Do jeito que w3schools as expressa , elas soam iguais.

Referência CSS da W3Schools

div + p
Seleciona todos os <p>elementos que são colocados imediatamente após os <div>elementos

div ~ p
Seleciona todos os <p>elementos que são precedidos por um <div>elemento

Se um <p>elemento está imediatamente após um <div>elemento, isso não significa que o <p>elemento é precedido por um <div>elemento?

De qualquer forma, estou procurando um seletor onde posso selecionar um elemento que é colocado imediatamente antes de um determinado elemento.

Seletores irmãos adjacentes X + Y

Os seletores irmãos adjacentes têm a seguinte sintaxe: E1 + E2, onde E2 é o assunto do seletor. O seletor corresponde se E1 e E2 compartilham o mesmo pai na árvore do documento e E1 precede imediatamente E2, ignorando nós não-elementos (como nós de texto e comentários).

ul + p {
   color: red;
}

Neste exemplo, ele selecionará apenas o elemento que é imediatamente precedido pelo elemento anterior. Nesse caso, apenas o primeiro parágrafo após cada ul terá texto em vermelho.

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>

Seletores irmãos gerais X ~ Y

O ~ combinador separa dois seletores e corresponde ao segundo elemento apenas se for precedido pelo primeiro, e ambos compartilham um pai comum.

ul ~ p {
   color: red;
}

Este combinador irmão é semelhante a X + Y, no entanto, é menos estrito. Enquanto um seletor adjacente (ul + p) selecionará apenas o primeiro elemento que é imediatamente precedido pelo seletor anterior, este é mais generalizado. Ele selecionará, referindo-se ao nosso exemplo acima, quaisquer p elementos, desde que sigam um 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>

Fonte

code.tutsplus

Seletores irmãos gerais MDN

Seletores irmãos adjacentes w3

Se um <p>elemento está imediatamente após um <div>elemento, isso não significa que o <p>elemento é precedido por um <div>elemento?

Isto está certo. Em outras palavras, div + pé um subconjunto apropriado de div ~ p- qualquer coisa combinada com a primeira também é combinada com a última, por necessidade.

A diferença entre +e ~é que ~corresponde a todos os irmãos seguintes, independentemente de sua proximidade do primeiro elemento, contanto que ambos compartilhem o mesmo pai.

Ambos os pontos são ilustrados de forma mais sucinta com um único exemplo, onde cada regra aplica uma propriedade diferente. Observe que aquele pque segue imediatamente o divtem as duas regras aplicadas:

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 qualquer forma, estou procurando um seletor onde posso selecionar um elemento que é colocado imediatamente antes de um determinado elemento.

Infelizmente, ainda não existe .

considere este exemplo:

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) Seletores de irmãos adjacentes (S1 + S2)

O seletor de irmão adjacente é usado para selecionar um elemento especificado que é imediato ao lado de outro elemento especificado. Ambos os elementos devem estar no mesmo nível.

div + p {
    color:red;
}

Exemplo de seletores de irmãos adjacentes

2) Seletores gerais de irmãos (S1 ~ S2)

O seletor irmão geral é usado para selecionar todos os elementos irmãos especificados de outro elemento especificado.

div ~ p {
   color:red;
}

Exemplo geral de seletores de irmãos

Seletores de Irmãos Adjacentes (S1 + S2) vs Irmãos Gerais (S1 ~ S2):

O seletor irmão adjacente (S1 + S2) seleciona o elemento irmão imediato apenas, mas o seletor irmão geral (S1 ~ S2) seleciona todos os elementos irmãos de outro elemento especificado. Ambos os casos, ambos os elementos (S1 e S2) devem estar no mesmo nível.

Os seletores restantes são explicados aqui: https://www.csssolid.com/35-css-selectors-to-remember.html