:last-child要求元素既是最后一个子元素又符合选择器，而:last-of-type只关注同类型元素中的最后一个；前者更严格，后者按类型匹配更灵活。
:last-child 和 :last-of-type 都是 CSS 中的伪类选择器，用来选中特定位置的元素，但它们的匹配逻辑不同，主要区别在于“兄弟元素中的类型是否被考虑”。
:last-child
这个选择器匹配的是父元素中的最后一个子元素，且该子元素必须满足指定的标签或条件。换句话说，它要求这个元素既是最后一个孩子，又符合前面的元素选择器。例如：- p:last-child 会选择那些既是
标签，同时又是其父元素最后一个子元素的段落。- 如果最后一个子元素不是 p，那么 p:last-child 就不会选中任何内容。
例子：
HTML:
第一段
第二段
最后是 span
CSS: p:last-child 不会生效，因为最后一个子元素是 span，不是 p。
:last-of-type
这个选择器会选中指定类型的元素中，在其父元素里“最后一次出现”的那个元素。它只关心某一类标签（如 p、div、span）的最后一个实例，而不管它在所有子元素中的位置。例如：- p:last-of-type 会选择父元素中最后一个
元素，即使后面还有其他类型的元素（比如 span 或 div）。
继续上面的例子：
瞬映
AI 快速创作数字人视频，一站式视频创作平台，让视频创作更简单。
57 查看详情 CSS: p:last-of-type 会选中第二个 p（“第二段”），因为它是所有 p 类型中的最后一个，尽管它不是整个子元素列表的最后一个。
关键区别总结
– :last-child：必须是最后一个子元素，且符合前面的选择器。- :last-of-type：只要是在同类型元素中排最后一个即可，不一定是所有子元素的最后一个。- :last-child 更严格；:last-of-type 更灵活，按元素类型分组找最后一个。
基本上就这些。理解它们的关键是看浏览器“按什么标准找最后一个”。
立即学习“前端免费学习笔记（深入）”；
以上就是css :last-child和:last-of-type有什么区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030566.html
微信扫一扫 
支付宝扫一扫 
