:first-child和:last-child用于选中父元素的首尾子元素，可精准控制样式。根据位置匹配，适用于去除首尾间距、突出首项、边框控制等场景，如list-item:last-child清除下边框；需注意必须是同级首个或末个子元素，且类型匹配，现代浏览器均支持，IE9+可用。
在网页开发中，经常需要对列表或容器中的第一个和最后一个子元素单独设置样式。CSS 提供了 :first-child 和 :last-child 伪类选择器，让我们可以精准地选中首尾元素，无需额外添加 class 或 id。
什么是 :first-child 和 :last-child？
:first-child 用于选中父元素中的第一个子元素，:last-child 则选中最后一个子元素。它们根据元素在父容器中的位置进行匹配，非常适用于动态内容或未知数量的列表项。
示例场景：
比如有一个无序列表，你想让第一个项目左边距更大，最后一个项目右边不加边距，就可以用这两个选择器轻松实现。
基本语法与使用方法
这两个伪类直接附加在目标元素的选择器后，写法如下：
立即学习“前端免费学习笔记（深入）”；
element:first-child —— 选中作为第一个子元素的 element element:last-child —— 选中作为最后一个子元素的 element
例如：
li:first-child { color: red; } li:last-child { color: blue; }
上面代码会让列表中第一个 li 文字变红，最后一个变蓝。
百灵大模型
蚂蚁集团自研的多模态AI大模型系列
313 查看详情
常见应用场景
这些选择器特别适合以下几种情况：
去除首尾间距：在水平导航栏中，给每个 item 加右边距，但最后一个不需要。 首项特殊标识：如新闻列表中突出显示第一条。 边框控制：避免相邻元素之间的重复边框，比如只在第一个加顶部边框，最后一个加底部边框。
实际例子：清除列表最后一项的下边框
.list-item { border-bottom: 1px solid #ddd; } .list-item:last-child { border-bottom: none; }
注意事项与兼容性
使用时要注意几点：
必须是同级子元素中的第一个或最后一个，中间不能有其他标签干扰结构。 如果第一个子元素不是目标类型，:first-child 不会匹配下一个符合条件的元素。 现代浏览器都支持这两个伪类，包括 IE9+，移动端完全可用。
比如下面这种情况不会生效：
- 项目1
- 项目2
说明文字
此时 li:first-child 不会匹配“项目1”，因为它不是父元素的第一个子元素。
基本上就这些。掌握 :first-child 和 :last-child 能让你更灵活地控制页面布局，减少冗余 class，写出更简洁的 CSS。
以上就是如何使用CSS实现first-child与last-child选择器_首尾元素样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/951219.html
微信扫一扫 
支付宝扫一扫 
