css伪类:first-child与:last-child组合复杂选择器如何书写_通过选择器组合语法优化_网络技术

发布时间 - 2026-01-23 00:00:00 点击率：次

:first-child和:last-child不能直接连写以匹配唯一子元素，仅当该元素是父容器的唯一子元素时才生效；选某类型首个/末个实例须用:first-of-type/:last-of-type。

很多人尝试写 :first-child:last-child 想匹配“既是第一个又是最后一个”的唯一子元素，语法上合法，但实际效果受限于 DOM 结构——只有当该元素**恰好是父容器的唯一子元素**时才生效。更常见的情况是想选中某个特定类型元素的第一个/最后一个实例，比如“第一个

”或“最后一个

”，这时必须用类型选择器前置，不能只靠伪类堆叠。

浏览器不支持 p:first-child 这种写法去匹配“第一个 p 元素”，因为 :first-child 只判断它是不是父元素的**第一个子节点**，不管类型。正确方式是用 :first-of-type 和 :last-of-type：

p:first-of-type {
  color: red;
}
li:last-of-type {
  font-weight: bold;
}

如果必须用 :first-child，得确保目标元素确实是父元素的第一个子节点，例如：

.container > p:first-child {
  margin-top: 0;
}

这只有在 p 紧跟在 .container 开始标签后（前面无其他子元素）时才生效。

伪类的位置很关键。下面这些写法含义完全不同：

容易踩的坑是把伪类放在复合选择器中间，比如 nav ul:first-child li，这其实是在找“nav 下第一个 ul 的所有 li”，而不是“nav 下每个 ul 的第一个 li”。

有人用 :not(:first-child) 或兄弟选择器 + :nth-child 模拟“第一个某类型”，比如：

li:not(li ~ li) { /* 试图选第一个 li */ }

这种写法既难读又低效，且 IE 不支持 :not() 嵌套伪类。现代项目应直接用：

li:first-of-type {
  border-top: 2px solid #333;
}
li:last-of-type {
  border-bottom: 2px solid #333;
}

:first-of-type 和 :last-of-type 在所有主流浏览器中支持良好（IE9+），语义清晰，渲染性能也优于复杂否定组合。真正需要 :first-child 的场景，通常是做重置样式（如移除首项上边距），此时它本就依赖结构位置，而非类型。

记住：伪类不是函数调用，没有“参数”概念；它们是条件断言，作用对象始终是当前选择器匹配到的那个元素本身——所以组合逻辑全看选择器主干怎么写，而不是伪类怎么排。