我不知道在不知道父元素的情况下选择第n个元素,最后一个元素或第一个元素的方法。nth-child存在,但仅针对儿童,例如:
nth-child
<div> <p>One</p> <p>Two</p> </div>
p:last-child选择“两个”段落,然后p:first-child选择“一个”段落。但是,当我拥有动态代码却不知道父级名称是什么,甚至不知道父级实际是什么(可能是div,span,anchor,ul等)时,该怎么办?
p:last-child
p:first-child
例如:
<youdontknowwhat!> <p class="select-me">One</p> <p class="select-me">Two</p> </youdontknowwhat!>
如何在这里选择第二段?(我无法选择,youdontknowwhat!因为我真的不知道它是什么元素(这只是一个假设名称)。
youdontknowwhat!
为何会出现first-child,last-child以及nth-child选择和NO:first,:last,:nth(像.select-me:first)?
first-child
last-child
:first
:last
:nth
.select-me:first
有:first什么不同:first-child呢?每个HTML元素都是DOM中其他元素的子元素,但<html>根元素除外。– BoltClock
:first-child
<html>
这是因为您不知道父元素。–福米茨
你不需要知道父元素:first-child或:nth-child()工作。即使您未指定父元素, 它们也将起作用 。
:nth-child()
保证以下选择器可以匹配任何适当的.select-me元素,而不管其父元素是什么:
.select-me
.select-me:nth-child(2)