如何定位平面层次结构中的特定兄弟姐妹组？答案

【问题标题】：How can I target a specific group of siblings in a flat hierarchy?如何定位平面层次结构中的特定兄弟姐妹组？
【发布时间】：2012-10-31 02:41:09
【问题描述】：

假设你有这个 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> 元素的“中间对”。这可能吗？我实在想不通。

这个选择器只抓取<h1>之后的第一个<p>：

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

但是这个选择器抓取了正确的<p>元素对加上所有出现在我们想要的对之后的<p>元素：

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

有可能吗？

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

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

【问题讨论】：

标签： css css-selectors

【解决方案1】：

由于一般同级组合器的工作方式，不可能将同级的选择限制在特定范围或组内，即使是连续的同级。即使是 :not() 选择器在这里也无济于事。

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

【讨论】：