:first-child 和 :last-child 根据子元素位置匹配父元素下的首个或末尾子元素，要求元素类型一致；常用于去除首尾边距、优化间距及导航圆角等场景，需注意结构顺序影响匹配结果。
:first-child 和 :last-child 是 CSS 中常用的伪类选择器，用于选中父元素下的第一个或最后一个子元素。它们在实际开发中非常实用，比如用于调整列表、导航栏或布局中首尾元素的样式。
1. :first-child 用法
该伪类匹配其父元素中的第一个子元素，且该元素必须与选择器指定的类型一致（如果指定了标签名）。
示例：假设有一组段落：
第一段
立即学习“前端免费学习笔记（深入）”；
第二段
第三段
你想让第一个段落文字变红：
p:first-child {
color: red;
}
此时第一个 元素会被选中并应用样式。
⚠️ 注意：如果 p 不是父容器的第一个子元素，则不会生效。例如：
此时 p:first-child 不会匹配任何元素，因为第一个子元素是 h2，不是 p。若想选中第一个 p，可改用 p:first-of-type。
2. :last-child 用法
该伪类匹配其父元素中的最后一个子元素。
示例：有一个无序列表：
- 苹果
- 香蕉
- 橙子
想给最后一个列表项添加特殊背景：
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 能帮你更灵活地控制页面结构样式，关键是理解它们基于“位置”而非“类型”进行匹配。不复杂但容易忽略细节。
