first-child和first-of-type

first-child和first-of-type都是CSS选择器中的伪类，用于选择元素中的第一个子元素。

first-child选择器选择的是父元素的第一个子元素，无论这个子元素是什么类型的元素。

而first-of-type选择器则是选择父元素中第一个与指定类型相同的子元素，也就是说，如果父元素中有多个相同类型的子元素，只有第一个会被选择。

举个例子，如果有如下HTML代码：

<div>
  <p>第一个段落</p>
  <p>第二个段落</p>
  <span>第一个span</span>
  <p>第三个段落</p>
  <span>第二个span</span>
</div>

使用first-child选择器选择第一个子元素，结果是第一个段落：

div p:first-child {
  color: red;
}

而使用first-of-type选择器选择第一个段落，结果也是第一个段落：

div p:first-of-type {
  color: red;
}

但如果选择第一个span，使用first-child选择器会选择不到，因为第一个子元素是一个段落，而不是span：

div span:first-child {
  color: red;
}

而使用first-of-type选择器则可以选择到第一个span：

div span:first-of-type {
  color: red;
}

相关问题

:first-child 和:first-of-type

:first-child和:first-of-type是CSS选择器中的两个不同的选择器。

:first-child选择器匹配其父元素中的第一个子元素。例如，如果我们有以下CSS代码：
p:first-child { background-color: yellow; }
span:first-child { background-color: yellow; }
那么它将选择所有p元素和span元素中的第一个子元素，并将其背景颜色设置为黄色。\[1\]

:first-of-type选择器匹配其父级是特定类型的第一个子元素。例如，如果我们有以下CSS代码：
p:first-of-type { color: blue; }
那么它将选择所有p元素中的第一个子元素，并将其字体颜色设置为蓝色。注意，这里的:first-of-type只要是该类型元素的第一个就行了，不要求是第一个子元素了。\[2\]

所以，两个选择器的区别在于:first-child选择器只匹配其父元素中的第一个子元素，而:first-of-type选择器匹配其父级是特定类型的第一个子元素。
#### 引用[.reference_title]
- *1* [css:first-child和first-of-type](https://blog.csdn.net/xiaojinguniang/article/details/119887850)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *2* [:first-child和:first-of-type的区别](https://blog.csdn.net/weixin_46305214/article/details/104644576)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
- *3* [CSS选择器 :first-of-type/:last-of-type/ :first-child/:last-child 用法](https://blog.csdn.net/momo_mom177/article/details/124008659)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insert_down28v1,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]

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)` 关注元素在同类型元素中的顺序，只在同一类型内起作用。