css选择器:last-of-type与nth-of-type区别-css教程-PHP中文网

css选择器:last-of-type与nth-of-type区别

P粉602998670

发布： 2025-10-19 12:59:01

原创

734人浏览过

:last-of-type 选择同类型元素中的最后一个，如 p:last-of-type 选最后一个 p；:nth-of-type(n) 按位置或公式选第 n 个，如 2、odd、even 或 3n+1，适用于规律性选择。

css选择器:last-of-type与nth-of-type区别

:last-of-type 和 :nth-of-type 是 CSS 中用于选择特定类型元素的伪类选择器，它们的功能和使用场景不同。下面详细说明两者的区别。

这个选择器用来选中其父元素下同类型中的最后一个元素。

例如：你想选中某个 div 内最后一个 p 元素，不管中间有没有其他类型的标签（如 span、img 等），只要它是最后一个 p，就会被选中。

示例：

  
    p:last-of-type {<br>
      color: red;<br>
    }

登录后复制

上面规则会将每个父元素中最后一个 <p> 标签文字变红。

这个选择器更灵活，用于选中同类型元素中的第 n 个元素，n 可以是数字、关键字或公式。

Type Studio

一个视频编辑器，提供自动转录、自动生成字幕、视频翻译等功能

它不仅可以选第几个，还能用公式实现奇偶行等规律性选择。

常见用法：

:last-of-type 是一个定位末尾特定元素的快捷方式，等价于 :nth-of-type(last) 或实际使用中类似 :nth-of-type(n) 配合计算得出最后一个。

而 :nth-of-type 更通用，可以精确控制选择第几个或按规律选择。

注意：两者都基于元素的标签类型来匹配，比如 p、div、span 等。

基本上就这些，根据是否需要“最后一个”还是“某个位置”来决定用哪个。不复杂但容易忽略细节。

以上就是css选择器:last-of-type与nth-of-type区别的详细内容，更多请关注php中文网其它相关文章！

大家都在看：