: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 可以是数字、关键字或公式。
它不仅可以选第几个,还能用公式实现奇偶行等规律性选择。
常见用法:-
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 等。
基本上就这些,根据是否需要“最后一个”还是“某个位置”来决定用哪个。不复杂但容易忽略细节。










