之间有什么区别：与第n个孩子（1）：第一胎在CSS伪选择是否有比其他选择一个方法有什么好处？ [重复]

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否则输出:nth-child(your variable)等于1”。它也显然有以及存在的任何其他任意值2，213，等等。

编辑：FWIW :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;
  }
}

你可以迭代，然后动态地使用它来选择儿童。当然，你需要一个预处理来做到这一点（qazxsw POI）