:first-child选中父元素下第一个子元素，如li:first-child使首个li变红；:last-child选中最后一个，如li:last-child加粗末项；二者依赖实际结构位置，若首/尾元素不匹配则无效，常用于列表、导航等首尾样式控制。
:first-child 和 :last-child 是 CSS 中常用的结构伪类，用于选中父元素下的第一个或最后一个子元素。它们的使用方式相似，但作用位置相反。
1. :first-child 用法
这个伪类匹配其父元素中的第一个子元素，前提是该元素满足选择器条件。
例如：- 第一项
- 第二项
- 第三项
li:first-child {
color: red;
}
结果：只有“第一项”文字变为红色，因为它是 ul 下的第一个 li 元素。
2. :last-child 用法
这个伪类匹配其父元素中的最后一个子元素，同样需满足选择器条件。
立即学习“前端免费学习笔记（深入）”；
继续上面的例子：
li:last-child {
font-weight: bold;
}
结果：“第三项”加粗显示，因为它是 ul 中最后一个 li。
3. 注意事项与常见误区
这两个伪类依赖于元素在父容器中的实际位置，而不是类型。以下几点容易出错：
- 如果第一个子元素不是目标标签，比如第一个是 p 而不是 li，那么 li:first-child 就不会生效。
- 它们只看兄弟节点顺序，不关心类名或属性。
- 空格和文本节点一般不影响，但结构必须正确。
4. 实际应用场景
常用于列表、导航栏、表单控件等需要首尾特殊样式的场景。
- 给列表第一项添加上边距或去掉上边框
- 为最后一项按钮设置不同的背景色
- 轮播图中高亮首尾幻灯片
基本上就这些，掌握好结构关系就能准确使用。不复杂但容易忽略细节。
