如何在CSS中使用伪类:first-child和:last-child组合调整列表边框

来源：Golang编程网作者：樱由罗头衔：网络博主

导读：本期聚焦于小伙伴创作的《如何在CSS中使用伪类:first-child和:last-child组合调整列表边框》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《如何在CSS中使用伪类:first-child和:last-child组合调整列表边框》有用，将其分享出去将是对创作者最好的鼓励。

在网页布局中，无序列表和有序列表是展示同类内容的常用组件，很多时候我们会给列表项添加边框来区分不同的内容项，但默认的边框设置往往会让第一个列表项的顶部边框和最后一个列表项的底部边框出现多余的情况，或者首尾项的边框样式和其他项不一致，这时候就可以使用CSS的:first-child和:last-child伪类来精准调整。

:first-child和:last-child伪类基础

:first-child是CSS结构性伪类，用于匹配父元素下的第一个子元素，:last-child则用于匹配父元素下的最后一个子元素。这两个伪类不需要额外给元素添加class或者id，就能直接选中特定位置的子元素，非常适合用来处理列表首尾项的样式。

比如有一个简单的无序列表结构如下：

<ul class="item-list">
  <li>列表项一</li>
  <li>列表项二</li>
  <li>列表项三</li>
  <li>列表项四</li>
</ul>

单独使用伪类调整边框的问题

如果直接给所有列表项添加底部边框，会出现最后一个列表项也有底部边框，和列表容器的底部边框重复的问题，代码如下：

.item-list li {
  padding: 12px 16px;
  border-bottom: 1px solid #e5e5e5;
}

这时候最后一个列表项的底部边框会多余，单独使用:last-child可以去掉最后一个项的底部边框：

.item-list li:last-child {
  border-bottom: none;
}

但如果列表容器本身有边框，第一个列表项的顶部和容器顶部之间可能也会有间隙，这时候就需要结合:first-child来调整。

组合使用两个伪类调整列表边框

组合使用:first-child和:last-child可以实现更灵活的边框控制，常见的场景有以下几种：

场景一：列表容器带边框，内部项只加分割线

给列表容器添加整体边框，内部列表项只添加底部分割线，首尾项不需要额外的顶部和底部边框，代码如下：

/* 列表容器样式 */
.item-list {
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 所有列表项基础样式 */
.item-list li {
  padding: 12px 16px;
}

/* 除了最后一个项，其他项都加底部分割线 */
.item-list li:not(:last-child) {
  border-bottom: 1px solid #e5e5e5;
}

/* 第一个项添加顶部内边距补偿，避免内容太靠上 */
.item-list li:first-child {
  padding-top: 16px;
}

/* 最后一个项添加底部内边距补偿 */
.item-list li:last-child {
  padding-bottom: 16px;
}

场景二：首尾项边框样式不同

如果需要第一个列表项的边框更粗，最后一个列表项的边框用虚线，也可以组合两个伪类实现：

.item-list li:first-child {
  border-top: 2px solid #333;
  border-bottom: 1px solid #e5e5e5;
}

.item-list li:last-child {
  border-bottom: 2px dashed #666;
}

注意事项

:first-child和:last-child匹配的是父元素下的第一个和最后一个子元素，如果列表项前面有其他类型的子元素，可能会导致匹配失败，比如ul下第一个子元素是div，那么li:first-child就不会生效。
如果列表项会被动态添加或者删除，这两个伪类会自动匹配新的首尾项，不需要额外修改样式代码，适配性更好。
如果需要兼容旧版本浏览器，需要确认目标浏览器是否支持这两个伪类，大部分现代浏览器都已经完全支持，无需担心兼容性问题。

完整示例代码

以下是一个可以直接运行的完整示例，展示了组合使用两个伪类调整列表边框的效果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>伪类调整列表边框示例</title>
  <style>
    .item-list {
      width: 300px;
      border: 1px solid #e5e5e5;
      border-radius: 4px;
      padding: 0;
      margin: 20px auto;
      list-style: none;
    }
    .item-list li {
      padding: 12px 16px;
    }
    .item-list li:not(:last-child) {
      border-bottom: 1px solid #e5e5e5;
    }
    .item-list li:first-child {
      padding-top: 16px;
      color: #2c3e50;
      font-weight: bold;
    }
    .item-list li:last-child {
      padding-bottom: 16px;
      color: #7f8c8d;
    }
  </style>
</head>
<body>
  <ul class="item-list">
    <li>首页</li>
    <li>产品中心</li>
    <li>解决方案</li>
    <li>关于我们</li>
    <li>联系我们</li>
  </ul>
</body>
</html>

CSS first-child last-child 列表边框伪类修改时间：2026-07-16 08:24:27

免责声明：已尽一切努力确保本网站所含信息的准确性。网站内容多为原创整理与精心编撰，观点力求客观中立。本站旨在免费分享，内容仅供个人学习、研究或参考使用。若引用了第三方作品，版权归原作者所有。如内容涉及您的权益，请联系我们处理。