:last-child 伪类选择器用于选中父元素的最后一个子元素并设置样式,常用于去除列表最后一项的边框或调整段落间距。其语法为 element:last-child { 样式声明 },匹配既是指定类型又是最后一个子元素的标签。典型应用场景包括:1. 去除 li 列表最后一项的 border-bottom;2. 清除 .content p 中最后一个段落的 margin-bottom。需注意,:last-child 严格判断是否为最后一个子节点,若父元素末尾为其他标签(如 div),则 p:last-child 不生效,此时应改用 :last-of-type。掌握该选择器可提升样式精确度,减少冗余 class。

:last-child 是 CSS 中一个非常实用的伪类选择器,它可以选中父元素下的最后一个子元素,并为其单独设置样式。使用它不需要给目标元素添加额外的 class 或 id,非常适合动态内容或不确定数量的列表。
基本语法
选择器格式为:element:last-child { 样式声明 }
常见使用场景
1. 去除列表最后一项的边框或分割线
在列表项之间添加下边框时,通常希望最后一项不显示边框:
li {
border-bottom: 1px solid #ccc;
}
li:last-child {
border-bottom: none;
}
2. 调整段落或标题间的间距
立即学习“前端免费学习笔记(深入)”;
避免容器内最后一个段落多余的空白:
.content p {
margin-bottom: 16px;
}
.content p:last-child {
margin-bottom: 0;
}
注意事项
:last-child 判断的是“是否为最后一个子元素”,而不仅仅是同类型中的最后一个。例如:- 如果最后一个子元素不是目标标签,样式不会生效
- 父元素中混用不同标签时需特别注意顺序
p:last-child 不会生效,因为最后一个子元素是 div:
第一段
第二段
结尾块
此时应使用 :last-of-type 更合适。
基本上就这些,掌握 :last-child 可以让布局更干净,减少冗余样式。










