假设您有以下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>
此选择器仅获取<p>后面的第一个<h1>:
<h1>
h1:nth-of-type(2) + p
但是此选择器将获取正确的<p>元素对 以及<p>我们想要的对之后出现的所有以下元素:
h1:nth-of-type(2) ~ p
可能吗?
没有JavaScript。 没有标记更改。通用解决方案。允许任意数量的<h1>s或<p>s,在这种情况下,数量2是任意的。
我在想使用:not()选择器使用某些方法是可能的,但我似乎无法弄清楚。有点像选择“一般兄弟姐妹”,然后根据需要进行排除,或者类似的选择。
:not()
由于通用同级组合器的工作方式,不可能将同级的选择限制在特定范围或组中,即使是连续的同级也是如此。即使:not()选择器在这里也无济于事。
您 将 必须使用JavaScript来定位正确的元素。jQuery的.nextUntil()方法立即浮现在脑海。
.nextUntil()