css - 如何定位平面层次结构中的特定 sibling 组？

Question

假设你有这个 HTML:

<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<h1>Header 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

请注意，层次结构是扁平的。

现在尝试选择 <p>的“中间对”元素。这可能吗？我真的想不通怎么办。

这个选择器只抓取第一个 <p>关注 <h1> :

h1:nth-of-type(2) + p

但是这个选择器捕获了正确的一对 <p>元素加上以下所有 <p>出现在我们想要的对之后的元素:

h1:nth-of-type(2) ~ p

是否可以？

没有 JavaScript。没有标记改变。通用解决方案。任意数量的 <h1> s 或 <p> s 是允许的，在这种情况下，数字 2 是任意的。

我在想也许这可以通过使用 :not() 来实现。选择器，但我似乎无法弄清楚。有点像选择“一般 sibling ”，然后根据需要排除，或类似的东西。

Answer 1

由于一般兄弟组合器的工作方式，不可能将 sibling 的选择限制在特定范围或组内，即使是连续的 sibling 。甚至 :not()选择器在这里没有任何帮助。

您必须使用 JavaScript 来定位正确的元素。 jQuery 的 .nextUntil() method立即浮现在脑海中。