如何在不知道父元素的情况下选择第 n 个子元素？答案

【问题标题】：How can I select an nth child without knowing the parent element?如何在不知道父元素的情况下选择第 n 个子元素？
【发布时间】：2017-01-28 22:33:35
【问题描述】：

在我不知道父元素的情况下，我无法找到选择第 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-child、last-child和nth-child选择器而没有:first、:last、:nth（比如.select-me:first）？

【问题讨论】：

【解决方案1】：

:first 与 :first-child 有何不同？每个 HTML 元素都是 DOM 中的某个其他元素的子元素，但 <html> 除外，它是根元素。 – 螺栓时钟

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

您无需知道 :first-child 或 :nth-child() 的父元素即可工作。 它们会正常工作，即使你没有指定父元素。

保证以下选择器匹配任何适当的.select-me 元素，无论其父元素是什么：

.select-me:nth-child(2)

【讨论】：

【解决方案2】：

*  p:nth-child(2)

当然最好能指定父选择器（出于性能考虑）

【讨论】：