:first-child:last-child仅匹配父容器中唯一子元素；需差异化处理首尾时应分开使用，避免混淆:first-of-type；注释等节点会影响匹配，布局间距控制是其典型用途。
为什么 :first-child 和 :last-child 不能直接“组合”写成 :first-child:last-child
这种写法语法合法，但实际生效条件极苛刻：只有当该元素**既是第一个子元素，又是最后一个子元素**时才匹配——也就是父容器里**只有一个子元素**。这不是“结合使用”的本意，而是意外重叠的边界情况。
真正需要的是对首尾元素做差异化样式处理，比如给列表首尾加不同边框、调整间距或隐藏某侧装饰线。
-
:first-child匹配父元素下位置为 1 的子元素（不关心类型） -
:last-child匹配父元素下位置为n的子元素（同样不关心类型） - 二者独立应用，互不影响；不存在“优先级覆盖”或“链式过滤”
常见误用：混淆 :first-child 与 :first-of-type
如果父容器中混有其他类型节点（比如 <div> 前面插了一个 <p> 或注释节点），:first-child 就会失效——它只看 DOM 树中的顺序位置，不识别标签名。
例如：
立即学习“前端免费学习笔记（深入）”；
<ul> <!-- 这个注释会让 li 不再是 first-child --> <li>A</li> <li>B</li> </ul>
此时 li:first-child 不会命中任何元素，因为第一个子节点是注释。解决方法是改用 li:first-of-type，它只找第一个 <li> 元素，跳过其他类型节点。
- 用
:first-child/:last-child前，先确认父容器子元素结构是否干净 - 若存在动态插入、服务端模板注入或 SSR 渲染干扰，优先考虑
:first-of-type和:last-of-type - HTML 注释、空格文本节点、
<script>标签都会影响:first-child判断
实用技巧：用 :first-child 和 :last-child 控制相邻元素间距
这是最典型的布局场景：避免列表项之间双倍边距，或统一控制外边距。传统做法是给所有项设 margin-bottom，再用 :last-child 覆盖掉最后一项的 margin。
li {
margin-bottom: 1rem;
}
li:last-child {
margin-bottom: 0;
}同理，也可用 :first-child 处理顶部留白：
section > .card {
margin-top: 1.5rem;
}
section > .card:first-child {
margin-top: 0;
}- 不要依赖
margin: 1rem 0然后单独清除首尾，容易漏掉方向逻辑 - 若需首尾都有特殊间距（如首项上边距 2rem、末项下边距 3rem），必须分别声明，不可合并
- Flex/Grid 布局中，这类 margin 技巧依然有效，但要注意容器是否启用了
gap——gap会替代 margin 成为首选间距方案
兼容性与性能注意点
:first-child 和 :last-child 在 IE9+、所有现代浏览器中完全支持，无兼容风险。但性能上需注意：
- 浏览器需遍历父元素全部子节点才能判定“第一”或“最后”，DOM 深度大时开销略增（通常可忽略）
- 避免在高频重绘区域（如滚动容器内部）大量使用，尤其是配合
transition或animation - 若需频繁切换首尾状态（如拖拽排序），CSS 伪类无法响应 JS 动态插入/移动，此时应改用 class 控制（如
.is-first）
真正难的不是怎么写这两个伪类，而是判断什么时候该用它们、什么时候该让位于更语义化或更可控的方案——比如用 data- 属性标记首尾，或交由 JS 管理状态。
