:first-child选中父元素的第一个子元素，如li:first-child使首个li变红；:last-child选中最后一个子元素，如p:last-child使末尾p加粗；二者均需元素类型匹配且位于对应位置。
:first-child 和 :last-child 是 CSS 中的两个结构性伪类选择器，它们用于选中父元素中的第一个或最后一个子元素。虽然功能相似，但作用方向相反。
1. :first-child 选择器
该选择器匹配其父元素中的第一个子元素，且该元素必须符合指定的类型。
例如：div:first-child 会选中作为第一个子元素的 div 元素。
如果第一个子元素不是 div，则不会被选中。
示例 HTML：
立即学习“前端免费学习笔记（深入）”；
- 第一项
- 第二项
- 第三项
CSS：
li:first-child { color: red; }
结果：第一项文字变为红色。
2. :last-child 选择器
该选择器匹配其父元素中的最后一个子元素，同样要求该元素符合指定的类型。
例如：p:last-child 会选中作为最后一个子元素的 p 元素。
如果最后一个子元素不是 p，则不生效。
示例 HTML：
立即学习“前端免费学习笔记（深入）”；
段落1
段落2
段落3
CSS：
p:last-child { font-weight: bold; }
结果：最后一个段落加粗显示。
关键区别总结
- :first-child 针对父元素下的第一个子元素
- :last-child 针对父元素下的最后一个子元素
- 两者都要求目标元素既是第一个（或最后一个）子元素，又符合前面的标签或类名条件
- 若顺序或结构改变，匹配结果也会变化
基本上就这些，使用时注意元素在父容器中的实际位置即可。不复杂但容易忽略细节。
