:first-child和:last-child用于选中父元素的首项和末项子元素，可分别对列表、导航、表格等结构的首个和最后一个元素设置特殊样式，如导航间距控制、列表首尾项样式、表格表头与末行优化，减少类名依赖，提升维护性，但需注意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外边距，但首项去左距，末项去右距，视觉更整洁。
Remove.bg
AI在线抠图软件，图片去除背景
174 查看详情 
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结构判断。
以上就是css :first-child与:last-child应用实例的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1042229.html
微信扫一扫 
支付宝扫一扫 
