:last-of-type用于选中父元素下同类型标签的最后一个，如li:last-of-type去除列表末项边框，p:last-of-type取消段落下间距，与:last-child不同，它只关注同类标签中的位置，不受其他类型元素影响，提升样式维护性。
:last-of-type 是CSS中的一个伪类选择器，用于选中其父元素下同类型元素中的最后一个。它特别适用于为某类标签的最后一个实例设置样式，比如去除列表最后一项的边框或调整段落末尾的间距。
使用 :last-of-type 时，浏览器会查找指定类型的元素，并只对其中在父容器内排在最后的那个应用样式。
例如：
p:last-of-type：选中父元素中最后一个 <p> 元素li:last-of-type：选中列表中最后一个 <li> 元素常见用途包括优化布局视觉效果，避免多余分隔线或空白。
示例1：移除列表最后一项的下边框
li {
border-bottom: 1px solid #ccc;
padding: 8px 0;
}
li:last-of-type {
border-bottom: none;
}
.article p {
margin-bottom: 16px;
}
.article p:last-of-type {
margin-bottom: 0;
}
:last-of-type 和 :last-child 不同。后者要求该元素必须是父元素的所有子元素中最后一个，而前者只要求是同类标签中的最后一个。
立即学习“前端免费学习笔记（深入）”；
举例说明：
<div> 后面还有一个 <span>，则 div:last-of-type 仍可匹配到最后一个 <div>
div:last-child 将不会匹配，因为它不是最后一个子元素基本上就这些。合理使用 :last-of-type 可以减少HTML中不必要的类名，让样式更简洁、维护更方便。注意测试结构变化是否影响选择结果，特别是在动态内容中。
以上就是如何在CSS中使用:last-of-type选择器实现特定元素样式的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
595
收藏
