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

Question

w3schools 的措辞方式，听起来是一样的。

W3Schools 的 CSS 参考

div + p

选择紧跟在 --- 元素之后的所有 <p> <div> 元素

div ~ p

选择前面有 <div> <p>

If a <p> element is immediately after a <div> element, doesn’t that mean that the <p> element is preceded by a <div> element ?

无论如何，我正在寻找一个选择器，我可以在其中选择一个紧挨 在 给定元素之前的元素。

原文由 user4055428 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

资源

代码.tutsplus

通用兄弟选择器 MDN

相邻兄弟选择器 w3

原文由 Alex Char 发布，翻译遵循 CC BY-SA 3.0 许可协议