CSS中的伪类选择器可以基于元素的位置、状态等特征匹配对应的DOM元素，:first-child是其中使用频率较高的一个，专门用于选中父元素下的第一个子元素，方便开发者对首项内容做差异化样式处理。
:first-child的基本语法
:first-child伪类的语法非常简单，只需要把它跟在目标元素选择器后面即可，它会自动匹配当前选择器的父元素下的第一个子元素，前提是该子元素和目标选择器匹配。
基础语法格式如下：
/* 选中所有作为父元素第一个子元素的p标签 */
p:first-child {
color: #ff0000;
font-weight: bold;
}
/* 选中ul下的第一个li子元素 */
ul li:first-child {
margin-top: 0;
}
:first-child的匹配规则说明
理解:first-child的匹配逻辑是正确使用它的前提，核心规则可以总结为两点：
- 首先找到目标元素选择器的父元素，遍历该父元素下的所有直接子元素
- 如果第一个直接子元素的类型和目标选择器匹配，就应用对应样式，否则不会生效
比如下面的HTML结构中，:first-child的匹配结果会和预期有差异：
<div class="container">
<h3>标题</h3>
<p>第一个段落</p>
<p>第二个段落</p>
</div>
如果写p:first-child，是无法选中第一个p标签的，因为container的第一个子元素是h3，不是p，所以p选择器和:first-child的组合不会匹配到任何元素。
实际使用示例
调整列表首项样式
最常见的场景是给无序列表的第一个li设置特殊样式，比如去掉顶部边框、修改背景色等，代码如下：
<ul class="news-list">
<li>最新新闻内容一</li>
<li>最新新闻内容二</li>
<li>最新新闻内容三</li>
</ul>
.news-list li {
padding: 12px 0;
border-top: 1px solid #eeeeee;
}
/* 选中列表第一个li，去掉顶部边框 */
.news-list li:first-child {
border-top: none;
background-color: #f5f5f5;
}
调整表单首项间距
在表单布局中，经常需要给第一个输入框去掉上边距，让整体布局更紧凑，也可以借助:first-child实现：
<form class="login-form">
<input type="text" placeholder="请输入用户名" />
<input type="password" placeholder="请输入密码" />
<button type="submit">登录</button>
</form>
.login-form input {
display: block;
margin-top: 16px;
width: 100%;
height: 40px;
}
/* 选中表单第一个input，去掉上边距 */
.login-form input:first-child {
margin-top: 0;
}
:first-child和:first-of-type的区别
很多开发者会把这两个伪类混淆，两者的核心差异在于匹配逻辑：
| 选择器 | 匹配逻辑 | 适用场景 |
|---|---|---|
| :first-child | 匹配父元素的第一个子元素，且该元素要和目标选择器类型一致 | 明确知道第一个子元素就是目标类型时使用 |
| :first-of-type | 匹配父元素下第一个指定类型的子元素，不管前面有没有其他类型的子元素 | 目标类型的第一个元素前面有其他类型元素时使用 |
还是用之前的div结构举例，如果想选中第一个p标签，用p:first-of-type就可以生效，而p:first-child不会生效，因为第一个子元素是h3。
常见使用误区
- 不要误以为:first-child是选中目标元素下的第一个子元素，它选中的是目标元素本身，且目标元素必须是父元素的第一个子元素
- 如果父元素的第一个子元素被隐藏（比如设置了display:none），:first-child依然会匹配这个隐藏的元素，不会自动跳过找下一个
- 在动态添加子元素的场景中，新增的元素如果变成第一个子元素，会自动应用:first-child的样式，不需要额外处理
注意：:first-child是CSS2就引入的伪类，所有现代浏览器都支持，包括IE8及以上版本，不需要担心兼容性问题。
CSS:first-child伪类首项样式修改时间：2026-06-24 22:18:30