如何在统一层次结构中定位特定的一组兄弟姐妹？

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>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:nth-of-type(2) + p

可能吗？

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

我在想，也许可以通过:not()选择器使用某些方法，但是我似乎无法弄清楚。有点像选择“一般兄弟姐妹”，然后根据需要进行排除，或者类似的选择。

Answer 1

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

你将不得不使用JavaScript来瞄准正确的元素。jQuery 的.nextUntil()方法立即浮现在脑海中。