css :last-child和:last-of-type有什么区别_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css :last-child和:last-of-type有什么区别

2025-10-05

浏览次数：次

返回列表

:last-child要求元素既是最后一个子元素又符合选择器，而:last-of-type只关注同类型元素中的最后一个；前者更严格，后者按类型匹配更灵活。

css :last-child和:last-of-type有什么区别

:last-child 和 :last-of-type 都是 CSS 中的伪类选择器，用来选中特定位置的元素，但它们的匹配逻辑不同，主要区别在于“兄弟元素中的类型是否被考虑”。

:last-child

这个选择器匹配的是父元素中的最后一个子元素，且该子元素必须满足指定的标签或条件。换句话说，它要求这个元素既是最后一个孩子，又符合前面的元素选择器。例如：- p:last-child 会选择那些既是 <p></p> 标签，同时又是其父元素最后一个子元素的段落。- 如果最后一个子元素不是 p，那么 p:last-child 就不会选中任何内容。

例子：

HTML:

第一段

第二段

UXbot

AI产品设计工具

185 查看详情 UXbot

最后是 span CSS: p:last-child 不会生效，因为最后一个子元素是 span，不是 p。

:last-of-type

这个选择器会选中指定类型的元素中，在其父元素里“最后一次出现”的那个元素。它只关心某一类标签（如 p、div、span）的最后一个实例，而不管它在所有子元素中的位置。例如：- p:last-of-type 会选择父元素中最后一个 <p></p> 元素，即使后面还有其他类型的元素（比如 span 或 div）。

继续上面的例子：