css伪类:first-child和:last-child使用方法

:first-child 和 :last-child 根据子元素位置匹配父元素下的首个或末尾子元素，要求元素类型一致；常用于去除首尾边距、优化间距及导航圆角等场景，需注意结构顺序影响匹配结果。

:first-child 和 :last-child 是 CSS 中常用的伪类选择器，用于选中父元素下的第一个或最后一个子元素。它们在实际开发中非常实用，比如用于调整列表、导航栏或布局中首尾元素的样式。

1. :first-child 用法

该伪类匹配其父元素中的第一个子元素，且该元素必须与选择器指定的类型一致（如果指定了标签名）。

示例：

假设有一组段落：

<p>第一段</p>
<p>第二段</p>
<p>第三段</p>

你想让第一个段落文字变红：

立即学习“前端免费学习笔记（深入）”；

p:first-child {
color: red;
}

此时第一个 <p> 元素会被选中并应用样式。

⚠️ 注意：如果 p 不是父容器的第一个子元素，则不会生效。例如：

<div>
<h2>标题</h2>
<p>第一段</p>
<p>第二段</p>
</div>

此时 p:first-child 不会匹配任何元素，因为第一个子元素是 h2，不是 p。若想选中第一个 p，可改用 p:first-of-type。

2. :last-child 用法

该伪类匹配其父元素中的最后一个子元素。

示例：

有一个无序列表：

<ul>
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>
</ul>

想给最后一个列表项添加特殊背景：

li:last-child {
background-color: #f0f0f0;
}

这样“橙子”对应的 li 就会被选中。

同样，如果最后一个子元素不是目标标签，选择器也不会生效。确保结构匹配。

3. 常见应用场景

• 去除列表首项或末项的边距或边框，避免多余线条：

li:not(:last-child) {
border-right: 1px solid #ccc;
}

为文章段落之间的间距做优化：

p + p {
margin-top: 0.5em;
}
p:first-child {
margin-top: 0;
}

导航菜单中只给第一个和最后一个按钮加圆角：

.nav-btn:first-child  { border-radius: 4px 0 0 4px; }
.nav-btn:last-child   { border-radius: 0 4px 4px 0; }

基本上就这些。掌握 :first-child 和 :last-child 能帮你更灵活地控制页面结构样式，关键是理解它们基于“位置”而非“类型”进行匹配。不复杂但容易忽略细节。