Difference between the selectors div + p (plus) and div ~ p (tilde)

Adjacent sibling selectors X + Y

Adjacent sibling selectors have the following syntax: E1 + E2, where
E2 is the subject of the selector. The selector matches if E1 and E2
share the same parent in the document tree and E1 immediately precedes
E2, ignoring non-element nodes (such as text nodes and comments).

ul + p {
   color: red;
}

In this example it will select only the
element that is immediately preceded by the former element. In this
case, only the first paragraph after each ul will have red 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>

General sibling selectors X ~ Y

The ~ combinator separates two selectors and matches the second
element only if it is preceded by the first, and both share a common
parent.

ul ~ p {
   color: red;
}

This sibling combinator is similar to X + Y, however, it’s less
strict. While an adjacent selector (ul + p) will only select the first
element that is immediately preceded by the former selector, this one
is more generalized. It will select, referring to our example above,
any p elements, as long as they follow 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>

Source

code.tutsplus

General sibling selectors MDN

Adjacent sibling selectors w3