:last-child 选择器用于选中父元素的最后一个子元素，常用于移除列表末尾边框、调整布局间距等场景；其语法为 selector:last-child，要求目标元素必须是父节点的最后一个子节点且类型匹配，不支持文本或注释节点干扰，兼容现代浏览器及 IE9+；相比 :last-of-type，它更严格依赖结构顺序而非元素类型，能有效减少类名依赖，提升样式维护性。
CSS 的 :last-child 选择器用于选中父元素下的最后一个子元素。当你想为列表、导航栏或任何一组并列元素的末尾项添加特殊样式时，这个选择器非常实用。它不需要依赖类名或 ID，直接通过结构关系定位目标，让代码更简洁。
什么是 :last-child 选择器？
:last-child 是一个伪类选择器，匹配其父元素中排在最后位置的子元素。只要该元素是它的父节点的最后一个子节点，就会被选中。
常见使用场景包括：- 移除列表最后一项的下边框或分割线
- 调整导航菜单末尾按钮的外边距
- 控制卡片布局中最后一个卡片的间距
基本语法与用法
语法格式为：selector:last-child，可与其他选择器结合使用。
例如，有一个无序列表：- 项目一
- 项目二
- 项目三
如果想去掉最后一个 的下边框：
立即学习“前端免费学习笔记（深入）”；
li {
border-bottom: 1px solid #ccc;
}
li:last-child {
border-bottom: none;
}
这样，“项目三”就不会显示底部边框，视觉上更干净。
注意事项与兼容性
使用 :last-child 时需注意以下几点：
- 必须是“最后一个子元素”，中间不能有其他标签（如注释、文本节点等干扰）
- 若最后一个子元素不是目标类型，则不会匹配（比如最后一个子元素是 div，而你写的是 p:last-child，就不会生效）
- 支持所有现代浏览器，IE9 及以上也支持，兼容性良好
与其他选择器对比
相比 :last-of-type，:last-child 更严格地依据顺序而非类型。例如：
div:last-child
表示：只有当最后一个子元素是 div 时才生效。而 div:last-of-type 表示：所有 div 子元素中的最后一个，即使后面还有其他类型的元素。
基本上就这些。合理使用 :last-child 能有效简化 HTML 结构，提升样式的可维护性。不复杂但容易忽略细节，掌握它对日常开发很有帮助。
