CSS中:first-child和:last-child用法详解
时间：2026-01-13 22:09:50 262浏览 收藏
小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《CSS 中可以通过 :first-child 和 :last-child 伪类来选中第一个或最后一个子元素。以下是具体用法和示例：1. :first-child 伪类:first-child 选择的是某个父元素中的第一个子元素，无论该子元素是什么类型（标签、文本等）。示例：.parent > :first-child { background-color: yellow; }
第一个元素
第二个元素
标签会被选中并设置背景颜色为黄色。2. :last-child 伪类:last-child 选择的是某个父元素中的最后一个子元素。示例：.parent > :last-child { background-color: lightblue; }
第一个元素
第二个元素
标签会被选中并设置背景颜色为浅蓝色。注意事项：:first-child 和 :last-child 是伪类，不是选择器，它们必须与元素选择器结合使用。这两个伪类是**基于》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！
:first-child和:last-child匹配父元素的首个/末个子元素，而非首个/末个符合条件的元素；误用.item:first-child会因前置其他节点失效；推荐:nth-child(1 of .item)或显式添加class。
first-child 和 last-child 的匹配逻辑容易误解
它们不是“找第一个/最后一个符合某条件的元素”，而是“检查该元素是否是父容器的第一个/最后一个子元素”。如果父元素第一个子是 当 HTML 结构里 比如用 JavaScript 动态插入新 IE 8 支持 真正难的不是写法，而是判断「你到底想选结构上的第一个，还是语义上第一个带 class 的」——这两个在真实 DOM 中经常不重合。 以上就是《CSS中:first-child和:last-child用法详解》的详细内容，更多关于的资料请关注golang学习网公众号！，第二个才是 div:first-child 根本不会生效——因为那个 常见误用：想选中第一个 .item 却写了 .item:first-child
.item:first-child 就会失效。正确做法是：:first-of-type（匹配同类型标签中的第一个）——但仅限于标签名一致，对 class 无效:nth-child(1 of .item)（现代浏览器支持，Chrome 105+、Firefox 118+、Safari 16.4+）class="item item-first"last-child 在动态列表中可能不如预期
到 就不再匹配 li:last-child。此时要注意：li:last-child 永远只匹配 DOM 树中物理位置最末的那个 元素（如 li:last-of-type 可能更接近意图margin-top: auto 等布局手段替代伪类兼容性与实际可选方案对比
:first-child 和 :last-child，但不支持 :first-of-type 或 nth-child(1 of ...)。如果必须兼容老环境：/* 安全写法：显式标记 */
.item:first-child,
.item-first {
/* 样式 */
}
<p>/<em> 或用属性选择器配合 JS 设置 data-index </em>/
.item[data-index="1"] { /<em> 第一个 </em>/ }
.item[data-index="last"] { /<em> 最后一个 </em>/ }</p>
