css伪类:first-child和:last-child如何结合使用_利用伪类选择特定子元素调整布局_技术教程

: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`

如果父容器中混有其他类型节点（比如 前面插了一个

 或注释节点），:first-child 就会失效——它只看 DOM 树中的顺序位置，不识别标签名。例如：

  
  A
  B
此时 li:first-child 不会命中任何元素，因为第一个子节点是注释。解决方法是改用 li:first-of-type，它只找第一个

 元素，跳过其他类型节点。

用 :first-child / :last-child 前，先确认父容器子元素结构是否干净
若存在动态插入、服务端模板注入或 SSR 渲染干扰，优先考虑 :first-of-type 和 :last-of-type

HTML 注释、空格文本节点、 标签都会影响 :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 管理状态。