CSS中:first-child和:last-child用法详解

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《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 的匹配逻辑容易误解

它们不是“找第一个/最后一个符合某条件的元素”，而是“检查该元素是否是父容器的第一个/最后一个子元素”。如果父元素第一个子是

，第二个才是

，那么 div:first-child 根本不会生效——因为那个

并非父元素的第一个子节点。

常见误用：想选中第一个 .item 却写了 .item:first-child

当 HTML 结构里

前面还有其他元素（比如标题、空格文本节点、注释），.item:first-child 就会失效。正确做法是：

• 用 :first-of-type（匹配同类型标签中的第一个）——但仅限于标签名一致，对 class 无效
• 更可靠的是用 :nth-child(1 of .item)（现代浏览器支持，Chrome 105+、Firefox 118+、Safari 16.4+）
• 或退而求其次，给第一个元素加单独 class，如 class="item item-first"

last-child 在动态列表中可能不如预期

比如用 JavaScript 动态插入新

到

末尾，旧的最后一个
• 就不再匹配 li:last-child。此时要注意：
  • li:last-child 永远只匹配 DOM 树中物理位置最末的那个
  • 如果列表中间有非
  • 元素（如

    ---

    ），li:last-of-type 可能更接近意图
  • 若需稳定样式“最后一项”，建议用 JS 控制 class，或改用 Flex/Grid 的 margin-top: auto 等布局手段替代伪类

  兼容性与实际可选方案对比

  IE 8 支持 :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>

  真正难的不是写法，而是判断「你到底想选结构上的第一个，还是语义上第一个带 class 的」——这两个在真实 DOM 中经常不重合。

  以上就是《CSS中:first-child和:last-child用法详解》的详细内容，更多关于的资料请关注golang学习网公众号！

Python资源释放技巧：finally与上下文用法解析

上一篇

Python资源释放技巧：finally与上下文用法解析

下一篇

1688阿里巴巴官网登录入口地址