gpt4 book ai didi

css - 如何定位平面层次结构中的特定 sibling 组?

转载 作者:行者123 更新时间:2023-12-04 15:13:37 25 4
gpt4 key购买 nike

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

最佳答案

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

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

关于css - 如何定位平面层次结构中的特定 sibling 组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13330757/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com