CSS 中的 `div p` 和 `div ~ p` 选择器有什么区别？

了解 Div P 和 Div ~ P 选择器

选择器 div p 和 div ~ p 根据它们在 HTML 元素中的关系来定位 HTML 元素。文档树。然而，两者之间有一个微妙的区别。

• Div P（加选择器）： 选择所有

  紧跟在

  之后的元素元素，没有中间元素。
• Div ~ P（波形符选择器）： 选择所有

  前面带有

  的元素元素，无论距离如何。

  何时使用加号选择器

  当您只想定位与给定紧邻的元素时，请使用选择器元素。例如，如果您有一个

  ；包含一个列表，并且您想要突出显示每个列表后的第一个段落，您可以使用：

  <code class="css">div + p {
    color: red;
  }</code>

  登录后复制

  何时使用波形符选择器

  使用 ~ 选择器当您想要定位给定元素之前的所有元素时，即使中间还有其他元素。例如，如果您想突出显示

  之后的所有标题， elements:

  <code class="css">div ~ h2 {
    color: blue;
  }</code>

  登录后复制

  特殊情况：选择给定元素之前的元素

  如果需要选择紧邻给定元素之前的元素，可以使用不同的选择器：相邻同级选择器 X Y.

  <code class="css">ul + p {
    color: red;
  }</code>

  登录后复制

  此选择器匹配所有

  直接跟在

  之后的元素元素，中间没有任何其他元素。