html - 有没有办法在 sibling 和 sibling 之间进行CSS选择？

Question

在下面的例子中，

<h2 class='first'>h2</h2>
    <p>p</p>
    <p>p</p>
    <p>p</p>
<h2 class='second'>h2</h2>
    <p>p</p>
    <p>p</p>
    <p>p</p>
<h2 class='third'>h2</h2>

我只想在 h2.first 和 h2.second 之间选择 p。我试过 select sibling 但它选择了它之后的所有元素。

Answer 1

您可以在 .first 之后选择每个 p，更改属性，然后为每个 p<unset 每个属性 在 .second 之后:

h2.first ~ p {
  color: red;
}

h2.second ~ p {
  color: unset;
}

<h2 class='first'>h2</h2>
<p>p</p>
<p>p</p>
<p>p</p>
<h2 class='second'>h2</h2>
<p>p</p>
<p>p</p>
<p>p</p>
<h2 class='third'>h2</h2>