: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 ]