:last-of-type比:last-child更可靠，因其只在同标签类型中倒序匹配最后一个元素，无视后续其他类型节点（如div、注释、文本），而:last-child要求目标必须是父元素的最后一个子节点，易受结构干扰。

:last-of-type 选中的是父元素下同标签名的最后一个子元素，不是页面里最后一个、也不是父元素的最后一个子节点——只看“类型”和“同类型中的位置”。

为什么 :last-of-type 比 :last-child 更可靠？

当 HTML 结构不规则（比如末尾混入其他标签）时，:last-child 往往失效，而 :last-of-type 仍能命中目标。

• p:last-child 要求
  必须是父元素的最后一个直接子节点；如果后面还有 或
  ，就完全不匹配
• p:last-of-type 只统计所有
  ，选其中 DOM 顺序最靠后的那个，不管它后面有没有别的标签
• 常见错误现象：li:last-child 在 CMS 输出末尾自动插入 注释或空
  后突然失效，换成 li:last-of-type 立刻恢复

  :last-of-type 的典型使用场景

  它最适合处理“同类元素末尾需特殊样式”的通用需求，尤其是动态生成内容时无需额外 class。

  

  CSS婚礼策划服务机构宣传网站模板

  CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

  下载

  • 移除列表最后一项的 border-bottom：用 li:last-of-type { border-bottom: none; }
  • 收窄文章末段的 margin-bottom：用 p:last-of-type { margin-bottom: 0; }
  • 给卡片容器中最后一个 添加圆角或阴影：.card img:last-of-type { border-radius: 4px; }
  • 避免在 Flex 容器中因换行导致 :last-child 错位，改用 :last-of-type 更稳定

  容易被忽略的限制与坑

  这个选择器看着简单，但几个边界条件常导致预期外行为。

  • 只认标签名，不认 class 或属性 —— div.red:last-of-type 和 div.blue:last-of-type 是独立计算的，不会跨 class 比较
  • 伪元素（如 ::before）、注释节点、文本节点都不参与计数，但隐藏元素（display: none）仍被计入
  • 不支持嵌套层级穿透 —— article p:last-of-type 只匹配
    的直接子
    ，若
    套在
    里就不生效
  • IE8 及更早版本完全不支持，现代项目基本可忽略，但若需兼容旧内网系统，得 fallback 到 class 控制

  真正要用好 :last-of-type，关键是盯住「父元素」「同标签名」「DOM 顺序」这三个锚点 —— 少一个，结果就可能出人意料。