一尘不染

如何在不知道父元素的情况下选择第n个孩子?

css

我不知道在不知道父元素的情况下选择第n个元素,最后一个元素或第一个元素的方法。nth-child存在,但仅针对儿童,例如:

<div>
   <p>One</p>
   <p>Two</p>
</div>

p:last-child选择“两个”段落,然后p:first-child选择“一个”段落。但是,当我拥有动态代码却不知道父级名称是什么,甚至不知道父级实际是什么(可能是div,span,anchor,ul等)时,该怎么办?

例如:

<youdontknowwhat!>
   <p class="select-me">One</p>
   <p class="select-me">Two</p>
</youdontknowwhat!>

如何在这里选择第二段?(我无法选择,youdontknowwhat!因为我真的不知道它是什么元素(这只是一个假设名称)。

为何会出现first-childlast-child以及nth-child选择和NO:first:last:nth(像.select-me:first)?


阅读 445

收藏
2020-05-16

共1个答案

一尘不染

:first什么不同:first-child呢?每个HTML元素都是DOM中其他元素的子元素,但<html>根元素除外。– BoltClock

这是因为您不知道父元素。–福米茨

你不需要知道父元素:first-child:nth-child()工作。即使您未指定父元素, 它们也将起作用

保证以下选择器可以匹配任何适当的.select-me元素,而不管其父元素是什么:

.select-me:nth-child(2)
2020-05-16