选择器 div + p（加号）和 div ~ p（波形符）之间的区别

那样的方式w3学校 http://www.w3schools.com/短语它，它们听起来是一样的。

W3Schools 的 CSS 参考 http://www.w3schools.com/cssref/css_selectors.asp

div + p
选择全部<p>紧随其后放置的元素<div>元素

div ~ p
选择每个<p>前面带有 a 的元素<div> element

If a <p>元素紧接在 a 之后<div>元素，这是否意味着<p>元素前面有一个<div>元素？

无论如何，我正在寻找一个选择器，我可以在其中选择立即放置的元素before给定的元素。

相邻兄弟选择器 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>

Source

代码.tutsplus http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

通用兄弟选择器 MDN https://developer.mozilla.org/en-US/docs/Web/CSS/General_sibling_selectors

相邻兄弟选择器 w3 http://www.w3.org/TR/CSS21/selector.html#adjacent-selectors