(:first-child

`:first-child` 是CSS伪类选择器，它用于匹配元素集合中具有特定父元素的第一个子元素。这个选择器不应用于HTML元素本身，而是用于选择那些作为其父元素第一个子元素的元素。

例如，如果你想改变页面上所有`<div>`标签的第一个子元素（如`<p>`）的颜色，你可以这样做：

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

这里，`:first-child` 会匹配每个 `<div>` 元素的第一个直接子 `<p>` 元素，设置其颜色为红色。

请注意，`:first-child` 只对直接子元素有效，如果一个元素有多个兄弟元素在其父元素之前，那么它不会匹配到这些兄弟元素。

相关问题

:first-child

:first-child 是 CSS3 中的一个伪类选择器，用于选择作为其父元素下的第一个子元素的元素。具体来说，如果一个元素是其父元素下的第一个子元素，则该元素会被 :first-child 选择器选择。例如，以下 CSS 代码会将所有 ul 元素下的第一个 li 元素的文本变为红色：

ul li:first-child {
  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 ]