:last-of-type 选择同类型元素中的最后一个，如 p:last-of-type 选最后一个 p；:nth-of-type(n) 按位置或公式选第 n 个，如 2、odd、even 或 3n+1，适用于规律性选择。
:last-of-type 和 :nth-of-type 是 CSS 中用于选择特定类型元素的伪类选择器，它们的功能和使用场景不同。下面详细说明两者的区别。
:last-of-type 选择器
这个选择器用来选中其父元素下同类型中的最后一个元素。
例如：你想选中某个 div 内最后一个 p 元素，不管中间有没有其他类型的标签（如 span、img 等），只要它是最后一个 p，就会被选中。
示例：
p:last-of-type {
color: red;
}
上面规则会将每个父元素中最后一个
标签文字变红。
立即学习“前端免费学习笔记（深入）”；
:nth-of-type(n) 选择器
这个选择器更灵活，用于选中同类型元素中的第 n 个元素，n 可以是数字、关键字或公式。
闪念贝壳
闪念贝壳是一款AI 驱动的智能语音笔记，随时随地用语音记录你的每一个想法。
218 查看详情 
它不仅可以选第几个，还能用公式实现奇偶行等规律性选择。
常见用法：p:nth-of-type(2)：选中第 2 个 p 元素 p:nth-of-type(odd)：选中奇数位置的 p 元素 p:nth-of-type(even)：选中偶数位置的 p 元素 p:nth-of-type(3n+1)：从第 1 个开始，每 3 个选一个
关键区别总结
:last-of-type 是一个定位末尾特定元素的快捷方式，等价于 :nth-of-type(last) 或实际使用中类似 :nth-of-type(n) 配合计算得出最后一个。
而 :nth-of-type 更通用，可以精确控制选择第几个或按规律选择。
注意：两者都基于元素的标签类型来匹配，比如 p、div、span 等。
基本上就这些，根据是否需要“最后一个”还是“某个位置”来决定用哪个。不复杂但容易忽略细节。
以上就是css选择器:last-of-type与nth-of-type区别的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1004556.html
微信扫一扫 
支付宝扫一扫 
