:first-child和:last-child用于选中父元素的首尾子元素，可精准控制样式。根据位置匹配，适用于去除首尾间距、突出首项、边框控制等场景，如list-item:last-child清除下边框；需注意必须是同级首个或末个子元素，且类型匹配，现代浏览器均支持，IE9+可用。
在网页开发中，经常需要对列表或容器中的第一个和最后一个子元素单独设置样式。CSS 提供了 :first-child 和 :last-child 伪类选择器，让我们可以精准地选中首尾元素，无需额外添加 class 或 id。
什么是 :first-child 和 :last-child？
:first-child 用于选中父元素中的第一个子元素，:last-child 则选中最后一个子元素。它们根据元素在父容器中的位置进行匹配，非常适用于动态内容或未知数量的列表项。
示例场景：比如有一个无序列表，你想让第一个项目左边距更大，最后一个项目右边不加边距，就可以用这两个选择器轻松实现。
基本语法与使用方法
这两个伪类直接附加在目标元素的选择器后，写法如下：
- element:first-child —— 选中作为第一个子元素的 element
- element:last-child —— 选中作为最后一个子元素的 element
例如：
li:first-child {
color: red;
}
li:last-child {
color: blue;
}
上面代码会让列表中第一个 li 文字变红，最后一个变蓝。
常见应用场景
这些选择器特别适合以下几种情况：
- 去除首尾间距：在水平导航栏中，给每个 item 加右边距，但最后一个不需要。
- 首项特殊标识：如新闻列表中突出显示第一条。
- 边框控制：避免相邻元素之间的重复边框，比如只在第一个加顶部边框，最后一个加底部边框。
实际例子：清除列表最后一项的下边框
.list-item {
border-bottom: 1px solid #ddd;
}
.list-item:last-child {
border-bottom: none;
}
注意事项与兼容性
使用时要注意几点：
- 必须是同级子元素中的第一个或最后一个，中间不能有其他标签干扰结构。
- 如果第一个子元素不是目标类型，:first-child 不会匹配下一个符合条件的元素。
- 现代浏览器都支持这两个伪类，包括 IE9+，移动端完全可用。
比如下面这种情况不会生效：
- 项目1
- 项目2
说明文字
此时 li:first-child 不会匹配“项目1”，因为它不是父元素的第一个子元素。
基本上就这些。掌握 :first-child 和 :last-child 能让你更灵活地控制页面布局，减少冗余 class，写出更简洁的 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
