CSS伪类first-child和last-child使用详解
时间：2026-01-19 10:21:39 438浏览 收藏
一分耕耘，一分收获！既然打开了这篇文章《CSS 中可以通过 :first-child 和 :last-child 伪类来选中第一个或最后一个元素。以下是具体用法和示例：1. :first-child:first-child 选择的是某个父元素中的第一个子元素。/* 选中所有 ul 下的第一个 li 元素 */
ul li:first-child {
color: red;
}注意：:first-child 是 选择第一个子元素，而不管它是什么类型的元素（如 等）。2. :last-child:last-child 选择的是某个父元素中的最后一个子元素。/* 选中所有 ul 下的最后一个 li 元素 */
ul li:last-child {
color: blue;
}同样，:last-child 也是根据位置选择，而不是根据元素类型。3. 区别于 :first-of-type 和 :last-of-type如果你希望根据元素类型来选择第一个或最后一个，可以使用：:first-of-type：选择同类型中的第一个元素。:last-of-type：选择同类型中的最后一个元素。例如：
/* 选中 div 中的第一个 p 元素 */
div p:first-of-type {
font-weight: bold;
}》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！ :first-child和:last-child匹配父元素的首个/末个子元素，而非首个/末个符合条件的元素；误用.item:first-child会因前置其他节点失效；推荐:nth-child(1 of .item)或显式添加class。 它们不是“找第一个/最后一个符合某条件的元素”，而是“检查该元素是否是父容器的第一个/最后一个子元素”。如果父元素第一个子是 当 HTML 结构里 比如用 JavaScript 动态插入新 IE 8 支持 真正难的不是写法，而是判断「你到底想选结构上的第一个，还是语义上第一个带 class 的」——这两个在真实 DOM 中经常不重合。 以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。
first-child 和 last-child 的匹配逻辑容易误解
，第二个才是 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>
