css选择器:last-child与last-of-type区别

:last-child 选择父元素中最后一个且符合指定类型的子元素，而 :last-of-type 选择父元素中该类型最后一个元素；例如在包含 p、p、span 的 div 中，p:last-child 不匹配（最后是 span），但 p:last-of-type 会匹配第二个 p。

:last-child 和 :last-of-type 都是CSS中的伪类选择器，用来选中特定位置的元素，但它们的匹配逻辑不同，容易混淆。下面详细说明两者的区别。

:last-child 选择器

这个选择器匹配的是父元素中的最后一个子元素，并且该元素必须符合选择器指定的类型。

换句话说，只有当目标元素既是最后一个子节点，又是所选标签时，才会被选中。

假设HTML结构如下：

立即学习“前端免费学习笔记（深入）”；

<div>
  <p>段落1</p>
  <p>段落2</p>
  <span>文本</span>
</div>

使用 p:last-child 不会选中任何元素，因为最后一个子元素是 <span>，不是 <p>。

但如果结构是：

稿定AI社区

在线AI创意灵感社区

60

查看详情

<div>
  <p>段落1</p>
  <p>段落2</p>
</div>

那么 p:last-child 就会选中第二个 <p>，因为它是最后一个子元素，且是 p 标签。

:last-of-type 选择器

这个选择器匹配的是父元素中，不关心它是否是所有子元素中的最后一个。

只要它是某一类标签（如 p、div、span）中排在最后的一个，就会被选中。

<div>
  <p>段落1</p>
  <p>段落2</p>
  <span>文本</span>
</div>

使用 p:last-of-type 会选中第二个 <p>，因为它是所有 p 标签中的最后一个，即使后面还有一个 span。

而 span:last-of-type 会选中那个 span 元素，因为它是唯一一个 span 类型，自然也是最后一个。

关键区别总结

• :last-child 关注的是“是否为最后一个子元素”，要求位置和类型都满足。
• :last-of-type 关注的是“是否为某类标签的最后一个”，只看标签类型，不强制要求是整体最后一个。
• 如果最后一个子元素恰好是目标类型，:last-child 和 :last-of-type 可能选中同一个元素。
• 当目标类型后面还有其他类型的元素时，:last-child 失效，:last-of-type 仍可生效。

基本上就这些。理解清楚两者的判断依据，就能准确选择需要的元素。实际使用中，:last-of-type 更灵活，尤其在子元素类型混杂时更实用。

以上就是css选择器:last-child与last-of-type区别的详细内容，更多请关注php中文网其它相关文章！