如何在平面层次结构中定位特定的兄弟姐妹组?

时间:2012-11-11 11:39:07

标签: css css3 css-selectors

假设你有这个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><p>,在这种情况下,数字2是任意的。

我想也许这可能是使用:not()选择器的一些人,但我似乎无法弄明白。有点像选择“一般兄弟姐妹”,然后根据需要排除,或类似的东西。

1 个答案:

答案 0 :(得分:3)

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

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