CSS伪类first-child和last-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。

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 中经常不重合。

  以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

Excel提取单元格颜色代码技巧

上一篇

Excel提取单元格颜色代码技巧

下一篇

智慧团建团费缴纳入口及登录教程