:last-of-type 选择同类型标签的最后一个元素，而 :nth-last-child(n) 从末尾倒数第 n 个子元素开始匹配；两者可组合使用以实现更精准的样式控制。
在 CSS 中，
:last-of-type和
:nth-last-child()都是伪类选择器，用于选中特定位置的元素。虽然它们功能相似，但工作方式不同。理解它们的区别和组合使用场景，有助于精准控制页面样式。
:last-of-type 是什么？
:last-of-type 选择的是其父元素中同类型标签的最后一个元素。比如多个
p标签中，最后一个
p会被选中，不管中间有没有其他类型的元素。 例如：
p:last-of-type会选中最后一个
<p>元素，即使它后面还有
<div>或
<span>。
:nth-last-child() 又是怎么工作的？
:nth-last-child(n) 从父元素的最后一个子元素开始倒数，匹配倒数第 n 个子元素，且必须是同级的直接子元素。
立即学习“前端免费学习笔记（深入）”；
常见用法：:nth-last-child(1)
等同于:last-child
—— 最后一个子元素:nth-last-child(2)
匹配倒数第二个子元素:nth-last-child(odd)
匹配倒数第奇数位的元素
可以组合使用吗？
可以！将
:last-of-type和
:nth-last-child()组合使用，能实现更精确的选择逻辑。组合时，两个条件。 示例场景：
你想选中既是某种类型最后一个，又处于倒数第几个位置的元素。
比如：
p:last-of-type:nth-last-child(2) {
color: red;
}
这行 CSS 的意思是：选中同时满足两个条件的
p元素：
- 它是所有
p
标签中的最后一个（:last-of-type
） - 它也是父元素所有子元素中倒数第二个（
:nth-last-child(2)
）
只有当同一个
p同时满足这两个条件时，样式才会生效。
实际应用场景
这类组合常用于结构固定的模块，比如文章末尾的提示段落或评论列表的最后一项。
举个例子：假设你有一组动态内容，希望当最后一个段落恰好是倒数第二个子元素时，给它加边框：
.content p:last-of-type:nth-last-child(2) {
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
}
这样可以避免对真正最后一个元素（可能是按钮或图片）应用不该有的样式。
基本上就这些。关键是理解两者判断依据不同：
:last-of-type看元素类型，
:nth-last-child看整体位置。组合使用时要确保逻辑一致，否则可能选不到任何元素。
