:first-child 和 :last-child 根据子元素位置匹配父元素下的首个或末尾子元素，要求元素类型一致；常用于去除首尾边距、优化间距及导航圆角等场景，需注意结构顺序影响匹配结果。
:first-child 和 :last-child 是 CSS 中常用的伪类选择器，用于选中父元素下的第一个或最后一个子元素。它们在实际开发中非常实用，比如用于调整列表、导航栏或布局中首尾元素的样式。
1. :first-child 用法
该伪类匹配其父元素中的第一个子元素，且该元素必须与选择器指定的类型一致（如果指定了标签名）。
示例：
假设有一组段落：
第一段
第二段
第三段
你想让第一个段落文字变红：
立即学习“前端免费学习笔记（深入）”；
p:first-child { color: red;}
此时第一个
元素会被选中并应用样式。
⚠️ 注意：如果 p 不是父容器的第一个子元素，则不会生效。例如：
标题
第一段
第二段
此时 p:first-child 不会匹配任何元素，因为第一个子元素是 h2，不是 p。若想选中第一个 p，可改用 p:first-of-type。
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情
2. :last-child 用法
该伪类匹配其父元素中的最后一个子元素。
示例：
有一个无序列表：
- 苹果
- 香蕉
- 橙子
想给最后一个列表项添加特殊背景：
li:last-child { background-color: #f0f0f0;}
这样“橙子”对应的 li 就会被选中。
同样，如果最后一个子元素不是目标标签，选择器也不会生效。确保结构匹配。
3. 常见应用场景
去除列表首项或末项的边距或边框，避免多余线条：
li:not(:last-child) { border-right: 1px solid #ccc;}
为文章段落之间的间距做优化：
p + p { margin-top: 0.5em;}p:first-child { margin-top: 0;}
导航菜单中只给第一个和最后一个按钮加圆角：
.nav-btn:first-child { border-radius: 4px 0 0 4px; }.nav-btn:last-child { border-radius: 0 4px 4px 0; }
基本上就这些。掌握 :first-child 和 :last-child 能帮你更灵活地控制页面结构样式，关键是理解它们基于“位置”而非“类型”进行匹配。不复杂但容易忽略细节。
以上就是css伪类:first-child和:last-child使用方法的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1046094.html
微信扫一扫 
支付宝扫一扫 
