CSS中:first-child和:last-child怎么一起用
2026-02-02 15:00:45
0浏览
收藏
文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《CSS中:first-child和:last-child伪类如何结合使用》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！
: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 树中的顺序位置，不识别标签名。<ul>
<!-- 这个注释会让 li 不再是 first-child -->
<li>A</li>
<li>B</li>
</ul>
li:first-child 不会命中任何元素，因为第一个子节点是注释。解决方法是改用 li:first-of-type，它只找第一个 元素，跳过其他类型节点。:first-child / :last-child 前，先确认父容器子元素结构是否干净:first-of-type 和 :last-of-type