first-of-type
时间: 2023-09-15 19:19:47 浏览: 52
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选择器选择的是父元素的第一个子元素,无论这个子元素是什么类型的元素。
而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 ]