css的:first-child是伪类选择器的一种，作用是匹配父元素下的第一个子元素，只要该子元素符合选择器的其他条件，就可以被选中并应用对应的样式。这个选择器在前端样式开发中非常常用，比如给列表的第一个项添加特殊标记，或者给表格的第一行设置不同的背景色。
:first-child的基本语法
这个选择器的语法格式非常简单，通常和元素选择器或者类选择器组合使用，基础写法如下：
/* 选择所有父元素下的第一个p子元素 */
p:first-child {
color: red;
font-weight: bold;
}
/* 选择类名为list的容器下的第一个li子元素 */
.list li:first-child {
background-color: #f0f0f0;
padding-left: 10px;
}
匹配规则说明
要正确使用:first-child，首先需要明确它的匹配逻辑，很多人用错都是因为误解了匹配规则：
- 首先找到元素的父元素，判断当前元素是不是父元素的第一个子元素，这里的第一个子元素指的是DOM树中的第一个节点，不管节点类型是什么。
- 如果当前元素是父元素的第一个子元素，再判断是否符合选择器前面的元素条件，两个条件都满足才会被选中。
- 如果父元素的第一个子元素不符合前面的元素条件，那么整个选择器不会匹配到任何元素。
常见使用场景示例
场景1：列表第一个项特殊样式
给无序列表的第一个li项添加不同的背景色和左边框，代码如下：
<ul class="nav-list">
<li>首页</li>
<li>产品中心</li>
<li>关于我们</li>
<li>联系我们</li>
</ul>
<style>
.nav-list li:first-child {
background-color: #1890ff;
color: white;
border-left: 3px solid #0050b3;
}
.nav-list li {
padding: 8px 12px;
margin-bottom: 4px;
list-style: none;
}
</style>
场景2：表格第一行特殊样式
给表格的表头行设置深色背景，代码如下：
<table class="data-table">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>职业</th>
</tr>
<tr>
<td>张三</td>
<td>25</td>
<td>工程师</td>
</tr>
<tr>
<td>李四</td>
<td>28</td>
<td>设计师</td>
</tr>
</table>
<style>
.data-table tr:first-child {
background-color: #333;
color: white;
}
.data-table td, .data-table th {
padding: 10px;
border: 1px solid #ddd;
text-align: center;
}
</style>
常见错误与避坑指南
错误1：父元素第一个子元素不是目标元素
比如下面的代码，:first-child不会生效：
<div class="container">
<h3>标题</h3>
<p>第一个段落</p>
<p>第二个段落</p>
</div>
<style>
/* 不会生效，因为container的第一个子元素是h3，不是p */
.container p:first-child {
color: red;
}
</style>
这里container的第一个子元素是<h3>，所以p:first-child匹配不到任何元素，如果要选第一个p，应该使用:first-of-type选择器。
错误2：混淆:first-child和:first-of-type
这两个选择器的区别是：:first-child匹配父元素的第一个子元素，不管元素类型；:first-of-type匹配父元素下指定类型的第一个元素。如果需求是选父元素下第一个某类型的元素，不要用错选择器。
兼容性说明
:first-child是css2.1就引入的伪类选择器，目前所有主流浏览器都支持，包括IE8及以上版本，实际开发中不需要担心兼容性问题，可以放心使用。
css:first-child伪类选择器前端样式修改时间：2026-07-01 10:51:17