如何使用CSS实现first-child与last-child选择器_首尾元素样式

在网页开发中，经常需要对列表或容器中的第一个和最后一个子元素单独设置样式。CSS 提供了 :first-child 和 :last-child 伪类选择器，让我们可以精准地选中首尾元素，无需额外添加 class 或 id。

什么是 :first-child 和 :last-child？

:first-child 用于选中父元素中的第一个子元素，:last-child 则选中最后一个子元素。它们根据元素在父容器中的位置进行匹配，非常适用于动态内容或未知数量的列表项。

示例场景：

比如有一个无序列表，你想让第一个项目左边距更大，最后一个项目右边不加边距，就可以用这两个选择器轻松实现。

基本语法与使用方法

这两个伪类直接附加在目标元素的选择器后，写法如下：

立即学习“前端免费学习笔记（深入）”；

• element:first-child —— 选中作为第一个子元素的 element
• element:last-child —— 选中作为最后一个子元素的 element

例如：

  li:first-child {
    color: red;
  }
  li:last-child {
    color: blue;
  }

上面代码会让列表中第一个 li 文字变红，最后一个变蓝。

豆绘AI

豆绘AI是国内领先的AI绘图与设计平台，支持照片、设计、绘画的一键生成。

485

查看详情

常见应用场景

这些选择器特别适合以下几种情况：

• 去除首尾间距：在水平导航栏中，给每个 item 加右边距，但最后一个不需要。
• 首项特殊标识：如新闻列表中突出显示第一条。
• 边框控制：避免相邻元素之间的重复边框，比如只在第一个加顶部边框，最后一个加底部边框。

实际例子：清除列表最后一项的下边框

  .list-item {
    border-bottom: 1px solid #ddd;
  }
  .list-item:last-child {
    border-bottom: none;
  }

注意事项与兼容性

使用时要注意几点：

• 必须是同级子元素中的第一个或最后一个，中间不能有其他标签干扰结构。
• 如果第一个子元素不是目标类型，:first-child 不会匹配下一个符合条件的元素。
• 现代浏览器都支持这两个伪类，包括 IE9+，移动端完全可用。

比如下面这种情况不会生效：

  <ul>
    <p>说明文字</p>
    <li>项目1</li>
    <li>项目2</li>
  </ul>

此时 li:first-child 不会匹配“项目1”，因为它不是父元素的第一个子元素。

基本上就这些。掌握 :first-child 和 :last-child 能让你更灵活地控制页面布局，减少冗余 class，写出更简洁的 CSS。