:first-child 选中父元素的第一个子元素，:last-child 选中最后一个子元素。两者依据元素在父容器中的顺序位置匹配，常用于列表分隔线、表格样式优化和表单微调。需注意它们不按类型匹配，若首个或末个子元素不符合选择器条件则失效；应使用 :first-of-type 或 :last-of-type 按类型定位。掌握其逻辑可提升 CSS 灵活性与可维护性。
:first-child 和 :last-child 是 CSS 中常用的结构性伪类，用于选中父元素下的第一个或最后一个子元素。它们在样式布局、列表美化、表格设计等场景中非常实用。虽然名称相似，但作用位置和使用细节有明显区别。
基本定义与语法
两者都属于“基于位置”的伪类，依赖于元素在其父容器中的顺序位置。:first-child：匹配父元素中的第一个子元素，且该子元素必须是指定的标签或满足选择器条件。:last-child：匹配父元素中的最后一个子元素，同样需满足选择器条件。
示例：
/* 选中列表中的第一项 */
li:first-child { color: red; }
/ 选中列表中的最后一项 /
li:last-child { color: blue; }
实际应用场景
这两个伪类常用于去除默认间距、添加分隔线、控制按钮组样式等。
1. 列表项之间的分隔线处理
立即学习“前端免费学习笔记（深入）”；
在水平导航栏或行内列表中，常需要在每项之间加边框，但首项前或末项后不需要。
/ 在每一项左边加边框，去掉第一项的边框 /
.nav li { border-left: 1px solid #ccc; }
.nav li:first-child { border-left: none; }
或者反过来，只给最后一项特殊样式（如提示箭头）：
.breadcrumb span:last-child { font-weight: bold; }
2. 表格样式的优化
对表格的首行或末行设置不同背景色：
tr:first-child td { background-color: #f0f0f0; }
tr:last-child td { border-bottom: 2px solid #333; }
瞬映
AI 快速创作数字人视频，一站式视频创作平台，让视频创作更简单。
57 查看详情 
3. 表单控件微调
在一组输入框中，取消第一个的上边距或最后一个的下边距：
.input-group input:first-child { margin-top: 0; }
.input-group input:last-child { margin-bottom: 0; }
常见误区与注意事项
使用时需注意选择器的精确性，避免因 DOM 结构变化导致失效。如果父元素的第一个子节点不是目标标签，:first-child 不会匹配。例如，一个
后面跟着
p:first-child 只有在它是第一个子元素时才生效。两者都是基于兄弟节点的位置，不关心元素类型是否相同。若想按类型匹配首个/末个元素，应使用 :first-of-type 或 :last-of-type。
举例：
假设结构为：
段落
第二个段落
此时 p:first-child 能匹配第一个 p，因为它确实是第一个子元素。
但如果结构变为：
标题
段落
那么 p:first-child 将不生效，因为 p 不是第一个子元素。
总结
:first-child 和 :last-child 是简洁高效的定位工具，适用于多数基于位置的样式控制。关键在于理解其匹配逻辑——依据的是元素在父容器中的顺序位置，而非类型或内容。合理使用可减少不必要的类名，提升代码可维护性。
基本上就这些，掌握它们能让你的 CSS 更加灵活和语义化。
以上就是CSS伪类:first-child与:last-child区别与应用实践的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/950481.html
微信扫一扫
支付宝扫一扫
