:last-child伪类选择器用于选取某个父元素中的最后一个子元素。它在CSS中非常有用，可以用来为列表、导航栏等结构中的最后一项应用不同的样式。基本用法假设你有如下HTML结构：<ul><li>项目一</li><li>项目二</li><li>项目三</li></ul>你可以使用:last-child

:last-child伪类是CSS中精准控制父元素末尾子元素样式的强大工具，它能轻松去除列表最后一项的多余边框、突出显示“查看更多”等引导性内容、取消Flex布局中末项的冗余间距，甚至为分页按钮或促销标识定制视觉效果；相比添加额外HTML类名，它让样式更简洁、结构更语义化、维护更高效——只要理解其核心逻辑：匹配的是兄弟元素中的物理位置，而非类型或内容，你就能在各类布局中游刃有余地实现干净、专业的视觉收尾。

在CSS中，:last-child 伪类用于选中父元素下的最后一个子元素。这个选择器非常实用，尤其在处理列表、导航菜单或卡片布局时，能轻松实现对最后一项的样式定制，比如去除多余的边框、调整背景色或文字颜色。

使用 :last-child 去除最后一项的边框

常见布局中，多个相邻元素之间会用边框分隔，例如垂直列表项之间加 border-bottom。但最后一项通常不需要底部边框，避免视觉上的多余线条。

示例代码：

.list-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
}

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

这样，所有 .list-item 都有下边框，唯独最后一个被移除，整体更整洁。

改变最后一项的文字或背景颜色

有时需要突出显示列表的最后一项，比如“查看更多”或特殊提示，可以通过 :last-child 单独设置颜色样式。

示例：

.menu-item {
  color: #333;
}

.menu-item:last-child {
  color: #007bff;
  font-weight: bold;
  background-color: #f5f5f5;
}

这个方法适用于导航栏、选项列表等场景，让末尾项更具可读性或引导作用。

结合其他选择器实现更精确控制

:last-child 不仅限于直接子元素，也可与其他选择器组合使用，提升灵活性。

比如只对特定类型的标签应用样式：

ul li:last-child {
  color: green;
}

这表示：只有当 li 是其父元素的最后一个子元素时才生效。注意：如果后面还有其他元素（如

），则不会匹配。

另外，若想确保即使后面有空元素也不影响，可考虑使用 :last-of-type 替代，它只看同类型标签的最后一个。

实际应用场景举例

• 分页导航中高亮“最后一页”按钮
• 商品列表中为最后一项添加促销标识
• 表单分组时，去掉最后一个输入项的下划线
• 横向 flex 布局中，取消最后一项的右边距

例如 flex 项目间加间距，但最后一项不加：

.flex-container {
  display: flex;
}

.flex-item {
  margin-right: 20px;
}

.flex-item:last-child {
  margin-right: 0;
}

基本上就这些。合理使用 :last-child 能减少HTML中冗余的类名，让样式更简洁、维护更方便。关键是理解它基于“兄弟元素中的位置”来判断，不是按类或内容筛选。掌握这点，就能精准控制末尾项的视觉表现。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《:last-child伪类选择器用于选取某个父元素中的最后一个子元素。它在CSS中非常有用，可以用来为列表、导航栏等结构中的最后一项应用不同的样式。基本用法假设你有如下HTML结构：

• 项目一
• 项目二
• 项目三