:first-child和:last-child伪类分别匹配父元素中同级第一个和最后一个子元素，且要求标签名一致；它们依据DOM顺序而非元素类型，与:first-of-type等不同。
要选中父容器内的第一个或最后一个子元素，CSS 提供了 :first-child 和 :last-child 伪类。它们匹配的是在**同级元素中位置靠前或靠后**的元素，且必须是某个父元素的直接子元素。
选中第一个子元素（:first-child）
该伪类选中其父元素下**第一个出现的子元素**，前提是该子元素的标签名与选择器一致。
- 例如
li:first-child会匹配元素 - 如果第一个子元素不是
li（比如开头有个），那这个li就不会被选中 - 它不关心元素内容或 class，只看 DOM 树中的顺序和标签是否匹配
选中最后一个子元素（:last-child）
与 :first-child 类似，:last-child 匹配父元素中**最后一个子元素**，且标签需一致。
-
div:last-child只有当某个父容器的最后一个子节点是时才生效- 若末尾是
或文本节点，即使前面有多个div，也不会命中- 常用于移除列表最后一项的边框、调整间距等场景
注意：first-child / last-child 不等于 first-of-type / last-of-type
这是容易混淆的点：
:first-child看的是“第几个孩子”，而:first-of-type看的是“同类型中的第一个”。比如：立即学习“前端免费学习笔记（深入）”；
HTML 示例：
标题
段落1
段落2
-
p:first-child→ 不匹配（不是第一个子元素） -
p:first-of-type→ 匹配第一个（即“段落1”） -
p:last-of-type→ 匹配“段落2”，而p:last-child同样匹配它（因为此处它也恰好是最后一个子元素）
实用小技巧
- 若末尾是
