我怎样可以针对同胞的一组特定的平面层次结构?(How can I target a specific

2019-07-03 17:45发布

假设你有这样的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的允许的,并且两个数,在这种情况下,是任意的。

我想,也许这是可能使用一些使用:not()选择,但我似乎无法弄清楚。 有点像选择“一般的兄弟姐妹”,然后排除在必要时,或者类似的东西。

Answer 1:

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

不得不使用JavaScript来瞄准正确的元素。 jQuery的.nextUntil()方法立即弹簧想到。



文章来源: How can I target a specific group of siblings in a flat hierarchy?