第二个孩子的伪选择器就像第一个孩子一样

Question

是否有一个相同的伪表选择器，其作用类似于:first-child，但具有父元素的第二个子元素？

我用过 :nth-child(2)但它是唯一的等价物，它似乎在应用样式时稍微有所不同。我也喜欢:first-child

的易读性

如果这相当于为什么使用:first-child而不是:nth-child(1)什么是正确的选择器，哪些人最多支持访问div容器的第一个和第二个子元素？

Answer 1

不，没有这样的选择器。您应该使用:nth-child(2)。

:first-child与:nth-child(1)兼容的浏览器较旧，因此我们使用:first-child

如果您使用的是:nth-child(2)，那么您自己就不应该使用:nth-child(1)。

Answer 2

除:nth-child(2)外，您还可以使用组合选择器

:first-child + *

引用相同的元素，因为它表示任何第一个孩子的下一个兄弟元素。更常见的是，您将使用p:nth-child(2)之类的东西，然后等效选择器

:first-child + p

“等价”在这里意味着选择器表示相同的元素集。它们的特异性不同，因此在需要时需要小心。

组合选择器稍微跨浏览器，因为IE 8支持所涉及的构造，它不支持:nth-child(2)。

示例：

<style>
:first-child + p {
  outline: solid red;
}
p:nth-child(2) {
  background: gray;
}
</style>
<div>
<p>foo
<p>bar
<p>more
</div>