:last-of-type选择器用于选中父元素下同标签名的最后一个子元素，如p:last-of-type会选中最后一个p标签，即使其后存在其他类型标签；常用于去除列表末尾边框、调整段落间距或高亮末项，与:last-child不同，后者要求元素必须是父级最后一个子节点且类型不限，而:last-of-type仅关注同类型标签中的最后一个，示例中li:last-of-type可去除最后列表项的下边框以优化视觉效果。
CSS 的 :last-of-type 伪类选择器用于选中其父元素下同类型（相同标签名）的最后一个子元素。这个选择器在控制列表、段落或特定标签的尾部样式时非常实用，比如去除最后一个元素的边框、调整间距或修改字体样式。
基本语法与作用
选择器格式为：element:last-of-type，它会匹配属于其父元素的同类型标签中的最后一个。
例如，有多个 p 标签时：
<p>第一段</p> <p>第二段</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> <p>第三段</p> <div>其他内容</div> <p>第四段</p>
使用 p:last-of-type 将选中“第四段”这个 p 元素，因为它是所有 p 标签中的最后一个，即使后面还有其他类型的标签。
常见应用场景
在实际开发中，:last-of-type 常用于优化布局视觉效果：- 移除列表最后一项的下边框：避免多余分隔线
- 调整段落间距：让最后一段与容器底部更紧凑
- 高亮末尾元素：如给最后一个按钮添加不同背景色
示例：去除列表项的最后边框
li {
border-bottom: 1px solid #ccc;
padding: 8px 0;
}
li:last-of-type {
border-bottom: none;
}
这样每个 li 都有下边框，唯独最后一个没有，视觉更整洁。
与其他类似选择器的区别
理解差异有助于准确使用：-
:last-child：必须是父元素的最后一个子元素，且类型不限。如果最后一个不是目标标签，则不生效 -
:last-of-type：只看同类型标签中的最后一个，不受后续其他标签影响
比如下面结构：
<p>段落1</p> <p>段落2</p> <span>文字</span>
此时 p:last-child 不会匹配任何元素（因为最后一个子是 span），但 p:last-of-type 会正确选中“段落2”。
注意事项
使用时注意以下几点：- 选择器对标签类型敏感，
div:last-of-type不会匹配span - 若同类型元素只有一个，该元素也会被
:last-of-type选中 - 在复杂嵌套结构中，确保理解父级上下文，避免误选
基本上就这些。合理使用 :last-of-type 能让你更精细地控制页面末尾元素的样式，提升界面细节表现力。
