前端css first-child 用法
时间: 2023-11-21 20:49:40 浏览: 80
:first-child选择器用于选中某个元素的第一个子元素。可以通过以下方式使用:first-child选择器:
.parent :first-child {
/* 在parent元素中选中第一个子元素 */
}
注意,:first-child选择器选中的是符合条件的第一个子元素,而不是在整个文档中的第一个元素。此外,:first-child选择器适用于所有的元素。
相关问题
first-child用法
:first-child是CSS中的伪类选择器,用于选择父元素的第一个子元素。在样式表中,可以使用:first-child来对选中的元素应用样式。例如,p:first-child表示选择父元素下的第一个p子元素,并对其应用样式。然而,需要注意的是,如果在选择器中加入了空格,如p :first-child,那么选择器将会匹配父元素下的所有后代元素的第一个子元素,而不仅仅是直接子元素。在jQuery中,也有一个:first-child选择器,用于选择父元素的第一个子元素。它的用法与CSS中的:first-child相似,可以用于查找并操作HTML文档中的元素。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [CSS选择器nth-child()、first-child()、last-child()、not()](https://blog.csdn.net/m0_46318298/article/details/128407978)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *2* [CSS3的first-child和last-child选择器用法总结(很容易犯才错误,有几个坑!)](https://blog.csdn.net/weixin_43343144/article/details/88787613)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
- *3* [jQuery中:first-child选择器用法实例](https://download.csdn.net/download/weixin_38680308/13038385)[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^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"]
[ .reference_list ]
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;
}
```
相关推荐
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)