CSSfirst-child和last-child用法详解

CSS中的:first-child和:last-child伪类选择器是高效控制页面首尾元素样式的利器，无需额外添加HTML类名即可精准作用于列表、导航栏、表格等结构的首个与末个子元素，轻松实现间距优化、图标点缀、表头强调等视觉效果，显著提升代码简洁性与维护性；但需留意DOM中非目标元素（如文本节点或注释）可能干扰匹配，实际使用时应结合具体结构谨慎验证。

在CSS中，:first-child 和 :last-child 是两个非常实用的伪类选择器，用于选中父元素中的第一个或最后一个子元素。它们常用于列表、导航栏、卡片布局等场景，帮助我们无需添加额外类名就能实现特定样式控制。

1. 基本语法与作用

:first-child 匹配父元素中的第一个子元素，:last-child 匹配最后一个子元素。这两个伪类只关心元素在父容器中的位置，不关心标签类型。

示例：

li:first-child { color: red; }
li:last-child  { color: blue; }

上面代码会让列表中第一个和最后一个 li 元素分别显示为红色和蓝色。

2. 应用于导航菜单的间距控制

常见需求是让导航项之间有间隔，但首项左侧无边距，末项右侧无边距。使用这两个伪类可轻松解决。

.nav-item {
  display: inline-block;
  margin: 0 10px;
}
.nav-item:first-child {
  margin-left: 0;
}
.nav-item:last-child {
  margin-right: 0;
}

这样每个导航项都有左右10px外边距，但首项去左距，末项去右距，视觉更整洁。

3. 列表项的特殊样式处理

在无序列表中，有时希望第一项加图标，最后一项变灰表示结束。

.list li:first-child::before {
  content: "★";
  margin-right: 5px;
}
.list li:last-child {
  color: #999;
  font-style: italic;
}

效果：列表第一项前出现星号，最后一项文字变浅并倾斜，增强可读性。

4. 表格中首尾行的样式优化

对表格的首行（标题行）和末行（总结行）进行特别设置。

table tr:first-child {
  background-color: #f0f0f0;
  font-weight: bold;
}
table tr:last-child {
  background-color: #e0e0e0;
  border-top: 2px solid #aaa;
}

表头加粗并浅灰底色，末行深灰底色加顶边框，突出结构层次。

基本上就这些。合理使用 :first-child 与 :last-child 能减少HTML类名冗余，提升样式维护效率，尤其适合动态内容场景。注意：若目标元素前/后存在其他类型元素（如文本、注释），可能影响匹配结果，需结合实际DOM结构判断。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~