有没有办法让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。我尝试了选择同级，但是它选择了所有元素。

Answer 1

您可以选择pafter after .first，更改属性，然后unset为pafter after 更改每个属性.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>