CSS:last-child选择器如何选中最后一个元素_控制列表尾部样式

:last-child 选择器用于选中父元素的最后一个子元素，常用于移除列表末尾边框、调整布局间距等场景；其语法为 selector:last-child，要求目标元素必须是父节点的最后一个子节点且类型匹配，不支持文本或注释节点干扰，兼容现代浏览器及 IE9+；相比 :last-of-type，它更严格依赖结构顺序而非元素类型，能有效减少类名依赖，提升样式维护性。

CSS 的 :last-child 选择器用于选中父元素下的最后一个子元素。当你想为列表、导航栏或任何一组并列元素的末尾项添加特殊样式时，这个选择器非常实用。它不需要依赖类名或 ID，直接通过结构关系定位目标，让代码更简洁。

什么是 :last-child 选择器？

:last-child 是一个伪类选择器，匹配其父元素中排在最后位置的子元素。只要该元素是它的父节点的最后一个子节点，就会被选中。

• 移除列表最后一项的下边框或分割线
• 调整导航菜单末尾按钮的外边距
• 控制卡片布局中最后一个卡片的间距

基本语法与用法

语法格式为：selector:last-child，可与其他选择器结合使用。

<ul>
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
</ul>

如果想去掉最后一个 <li> 的下边框：

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

li {
  border-bottom: 1px solid #ccc;
}

li:last-child {
  border-bottom: none;
}

这样，“项目三”就不会显示底部边框，视觉上更干净。

Logomaster.ai

Logo在线生成工具

99

查看详情

注意事项与兼容性

使用 :last-child 时需注意以下几点：

• 必须是“最后一个子元素”，中间不能有其他标签（如注释、文本节点等干扰）
• 若最后一个子元素不是目标类型，则不会匹配（比如最后一个子元素是 div，而你写的是 p:last-child，就不会生效）
• 支持所有现代浏览器，IE9 及以上也支持，兼容性良好

与其他选择器对比

相比 :last-of-type，:last-child 更严格地依据顺序而非类型。例如：

div:last-child

表示：只有当最后一个子元素是 div 时才生效。而 div:last-of-type 表示：所有 div 子元素中的最后一个，即使后面还有其他类型的元素。

基本上就这些。合理使用 :last-child 能有效简化 HTML 结构，提升样式的可维护性。不复杂但容易忽略细节，掌握它对日常开发很有帮助。

以上就是CSS:last-child选择器如何选中最后一个元素_控制列表尾部样式的详细内容，更多请关注php中文网其它相关文章！