6

假设你有这个 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()选择器，但我似乎无法弄清楚。有点像选择“一般兄弟姐妹”，然后根据需要排除，或类似的东西。

4

1 回答 1

5

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

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

于 2012-11-11T11:43:56.433 回答