first-child和**:nth-of-type(n)** 区别

`first-child` 和 `:nth-of-type(n)` 都是 CSS 伪类选择器，用于选择特定类型的元素，但它们的应用场景和选择范围不同。

1. `first-child`: 这个选择器用于匹配某个元素组中的第一个元素。比如，如果你想要选中每个段落（`<p>`）的第一个子元素，无论它是文本、列表项还是其他元素，只要它是该段落的第一个，就会被选中。它的重点在于元素在整个兄弟元素中的位置，不考虑元素的类型。

2. `:nth-of-type(n)`: 这个选择器则根据元素的类型来匹配。它会选择当前元素在其同类型兄弟元素中的第 n 个。例如，`:nth-of-type(2)` 会选择每个`<li>`元素中的第二个列表项，不论它们在页面上处于什么位置。这里的 n 可以是数字，也可以是其他值，如偶数(`even`)或奇数(`odd`)。

总结一下：
- `first-child` 关注元素在整体中的顺序，无论其类型。
- `:nth-of-type(n)` 关注元素在同类型元素中的顺序，只在同一类型内起作用。