在网页排版中，我们常常遇到这样的需求：一个列表中的第一项要突出显示，最后一项要去掉底边框，而中间部分还需要按照奇偶或者固定周期做差异化样式。如果纯粹靠手动添加 class，不仅结构冗余，后期维护也很容易出错。CSS 提供的 :first-child、:last-child 与 :nth-child 伪类，正是为了解决这类基于位置的样式控制问题。
一、三个伪类的基本语义
:first-child 用于匹配其父元素的第一个子元素。也就是说，只有当某个元素在兄弟节点中排第一时，该选择器才会生效。与之对应的 :last-child 则匹配最后一个子元素。这两个伪类在导航菜单、卡片列表的首尾修饰上非常实用。
:nth-child 则更为灵活，它接受一个参数，可以是数字、关键词（如 odd、even）或者形如 an+b 的表达式。例如 :nth-child(2n) 表示选中所有偶数位置的元素，:nth-child(3n+1) 表示从第一个开始每三个选一个。理解这三个伪类的关键在于：它们全部基于父元素下的子元素顺序，且包含所有元素类型，不区分标签名。
/* 选中父元素中第一个子元素 */
li:first-child {
font-weight: bold;
}
/* 选中父元素中最后一个子元素 */
li:last-child {
border-bottom: none;
}
/* 选中偶数位置的子元素 */
li:nth-child(2n) {
background-color: #f5f5f5;
}
二、组合应用的实际场景
单纯使用某一个伪类往往只能解决局部问题，而将它们组合在一起，才能实现真正的复杂控制。比如一个动态渲染的评论列表，我们希望第一条评论带“楼主”标识样式，最后一条去掉分割线，其余评论奇数行和偶数行背景交替。这种场景下，三个伪类可以无缝协作。
另一个典型场景是分页器。分页器的第一个按钮往往是“上一页”，最后一个按钮是“下一页”，中间是页码。通过 :first-child 和 :last-child 可以单独定制箭头按钮的圆角，而 :nth-child(n+2):nth-child(-n+6) 这类写法还能精确框定中间某几个页码的样式范围。这种组合减少了 JS 干预，也降低了模板复杂度。
<ul class="comment-list"> <li>第一条评论</li> <li>第二条评论</li> <li>第三条评论</li> <li>第四条评论</li> <li>第五条评论</li> </ul>
.comment-list li:first-child {
color: #e91e63;
font-weight: 700;
}
.comment-list li:last-child {
border-bottom: none;
}
.comment-list li:nth-child(odd) {
background: #fafafa;
}
.comment-list li:nth-child(even) {
background: #ffffff;
}
三、容易踩坑的注意事项
很多开发者在初次使用 :nth-child 时会发现“明明写了却没生效”，多数情况是因为忽略了子元素中混杂了其他节点。比如父元素下如果第一个子元素是换行文本或者一个 <span>，那么原本期望选中的 <li> 就不再是 :first-child。伪类计数不会跳过任何子节点，也不会因为 display:none 而重新排序。
此外，:first-child 与 :first-of-type 不同。前者要求绝对的第一位，后者只要求在同类标签中排第一。如果你的结构里混用了不同标签，就应该改用 :first-of-type 或调整 DOM 顺序。在组合使用 last-child 与 nth-child 时，也要注意二者可能命中同一个元素，此时样式优先级由 CSS 书写顺序和权重决定，而非伪类本身的“先后”概念。
<div class="box"> <p>说明文字</p> <span>标签一</span> <span>标签二</span> </div>
/* 下面这条不会命中任何 span，因为第一个子元素是 p */
.box span:first-child {
color: red;
}
/* 下面这条会命中“标签一”，因为它是第一个 span */
.box span:first-of-type {
color: blue;
}
四、用表达式做精细区间控制
当我们需要控制“从第 3 个到第 8 个”这类区间样式时，可以叠加两个 :nth-child 来模拟区间。其原理是利用 :nth-child(n+3) 选中第三及以后，再用 :nth-child(-n+8) 选中第八及以前，两者交集就是目标区间。这种写法在长列表高亮、步骤条激活段等需求中非常高效。
结合 :first-child 与 :last-child，我们还能处理“区间之外首尾特殊化”的情况。例如前两个和最后两个用强调色，中间区间用普通色。只要理清选择器之间的并集与交集关系，就能用纯 CSS 维护一套清晰可读的样式规则，而不必求助于内联 style 或频繁改类名。
/* 选中第3到第8个子元素 */
.item:nth-child(n+3):nth-child(-n+8) {
background: #e3f2fd;
}
/* 首尾两个单独强调 */
.item:first-child,
.item:last-child {
background: #ffecb3;
}
五、小结与编写建议
把 :first-child、:last-child 和 :nth-child 看作“位置过滤器”，就能以声明式的方式描述样式规则。在写选择器时，先确认父容器和子节点类型是否纯净，再决定用 child 系列还是 of-type 系列。对于动态数据列表，优先使用这些伪类，可以让前端模板保持简洁。
建议在团队项目中把常见的首尾与奇偶样式抽成基础工具类，例如 .list-first、.list-last 配合伪类实现，既方便复用也降低理解成本。当布局变动导致结构插入新节点时，记得回归测试伪类命中范围，避免视觉错乱。掌握它们的组合逻辑，复杂元素样式控制就不再依赖繁琐的脚本计算。
CSS伪类first-childnth-child修改时间：2026-08-09 03:30:35