: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结构如下：
立即学习“前端免费学习笔记（深入）”；
段落1
段落2
文本
使用 p:last-child 不会选中任何元素，因为最后一个子元素是 ，不是
。
但如果结构是：
Waymark
Waymark是一个视频制作工具，帮助企业快速轻松地制作高影响力的广告。
79 查看详情
段落1
段落2
那么 p:last-child 就会选中第二个
，因为它是最后一个子元素，且是 p 标签。
:last-of-type 选择器
这个选择器匹配的是父元素中，不关心它是否是所有子元素中的最后一个。
只要它是某一类标签（如 p、div、span）中排在最后的一个，就会被选中。
继续上面第一个例子：
段落1
段落2
文本
使用 p:last-of-type 会选中第二个
，因为它是所有 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区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1007654.html
微信扫一扫 
支付宝扫一扫 
