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