有什么区别:nth-​​child(1)与:css伪选择器中的first-child有没有选择一种方法而不是另一种方法的优点？

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)更容易以编程方式/生成.无需在预处理器代码中添加条件来测试"它是否等于1而不是输出选择器:first-child或输出:nth-child(your variable)".
它显然必须存在以及任何其他任意值2,213,无论如何.

编辑:FWIW :first-letter和:first-line之前的这些伪类已经存在,它会一直怪/烦不具备:first-child当:nth-child(an+b)创建:)