:first-child选中父元素的第一个子元素，如li:first-child使首个li变红；:last-child选中最后一个子元素，如p:last-child使末尾p加粗；二者均需元素类型匹配且位于对应位置。
:first-child 和 :last-child 是 CSS 中的两个结构性伪类选择器，它们用于选中父元素中的第一个或最后一个子元素。虽然功能相似，但作用方向相反。
1. :first-child 选择器
该选择器匹配其父元素中的第一个子元素，且该元素必须符合指定的类型。
例如：
div:first-child 会选中作为第一个子元素的 div 元素。
如果第一个子元素不是 div，则不会被选中。
示例 HTML：
立即学习“前端免费学习笔记（深入）”；
- 第一项
- 第二项
- 第三项
CSS：
li:first-child { color: red; }
结果：第一项文字变为红色。
2. :last-child 选择器
该选择器匹配其父元素中的最后一个子元素，同样要求该元素符合指定的类型。
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情 
例如：
p:last-child 会选中作为最后一个子元素的 p 元素。
如果最后一个子元素不是 p，则不生效。
示例 HTML：
立即学习“前端免费学习笔记（深入）”；
段落1
段落2
段落3
CSS：
p:last-child { font-weight: bold; }
结果：最后一个段落加粗显示。
关键区别总结
:first-child 针对父元素下的第一个子元素:last-child 针对父元素下的最后一个子元素两者都要求目标元素既是第一个（或最后一个）子元素，又符合前面的标签或类名条件若顺序或结构改变，匹配结果也会变化
基本上就这些，使用时注意元素在父容器中的实际位置即可。不复杂但容易忽略细节。
以上就是css伪类选择器:first-child和:last-child区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1053594.html
微信扫一扫 
支付宝扫一扫 
