选择器div + p（加号）和div〜p（波浪号）之间的差异

  • Z时代
  • 2024-01-10
  • 分类：问答

div + p

选择所有<p>紧随<div>元素之后的元素

div ~ p

选择<p>元素前面的每个<div>元素

如果一个<p>元素紧接在一个<div>元素之后，那是否不意味着该<p>元素前面有一个<div>元素？

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

回答：

相邻的同级选择器具有以下语法：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>

〜组合器分隔两个选择器，并且仅在第二个选择器后面有第二个选择器时才与之匹配，并且两者都共享一个公共父项。

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>

以上是 选择器div + p（加号）和div〜p（波浪号）之间的差异 的全部内容， 来源链接： utcz.com/qa/410419.html

回到顶部