Question

p:nth-child(1) {
color: red;
}

p:first-child {
color: red;
}

<div>
<p>first</p>
<p>second</p>
</div>

哪种伪选择器最适合在代码的段落标记中应用颜色

Answer 1

两者都将匹配相同的元素。页面没有差异：相同的特性，相同的行为。

:first-child对于人类来说更容易理解，并且对我们人类来说是通用:nth-child(an+b)

的一个很好的补充

nth-child(1)易于编程编写/生成。无需在预处理器代码中添加条件来测试“如果它等于输出选择器:first-child的1或输出:nth-child(your variable)的条件”。
显然，它还必须与其他任意值2、213一样存在。

edit：在这些伪类之前，已经存在:first-letter和:first-line两类，在创建:first-child时没有:nth-child(an+b)是很奇怪/令人讨厌的：）

Answer 2

基本上相同，它执行相同的工作，但是:nth-child为您提供了更多的体验空间。

例如

@for $i from 1 through 6 {
  .element:nth-child(#{$i}n) {
    animation-delay: #{$i * 0.05}s;
  }
}

您可以迭代，然后用它来选择孩子。当然，您将需要一个预处理器来执行此操作（SASS）