:first-child
时间: 2023-07-22 07:22:48 浏览: 55
:first-child 是 CSS3 中的一个伪类选择器,用于选择作为其父元素下的第一个子元素的元素。具体来说,如果一个元素是其父元素下的第一个子元素,则该元素会被 :first-child 选择器选择。例如,以下 CSS 代码会将所有 ul 元素下的第一个 li 元素的文本变为红色:
```
ul li:first-child {
color: red;
}
```
注意,该选择器只会选择作为其父元素下的第一个子元素的元素,如果该元素不是第一个子元素,即使它在同级元素中是第一个,也不会被选择。
相关问题
div:first-child
这是 CSS 中的伪类选择器,表示选择某个元素的第一个子元素。例如,如果有一个 div 元素,它有多个子元素,那么 div:first-child 就会选择这个 div 的第一个子元素。如果第一个子元素是一个 p 元素,那么 div:first-child 就会选择这个 p 元素。如果第一个子元素不是 p 元素,那么 div:first-child 就不会匹配任何元素。
: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 ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)
![](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)