CSS倒序选择器使用技巧

加粗：

p:nth-last-of-type(-n + 2) {
  font-weight: bold;
}

这个规则只会作用于 p 标签，并且是从最后一个 p 开始往前数两个。

若要选中倒数第一个段落，可使用：
p:nth-last-of-type(1) { margin-bottom: 0; }
这常用于清除最后一个段落的外边距。

常见公式与用法技巧

理解表达式结构是关键。格式为 (an + b)，其中 a 是循环周期，b 是偏移量。

• :nth-last-child(-n + 3)：匹配最后3个元素
• :nth-last-child(2n)：匹配倒数第2、4、6...等偶数位置的元素
• :nth-last-of-type(3)：仅匹配倒数第三个该类型元素
• :nth-last-of-type(odd)：匹配倒数第1、3、5...个该类型元素

注意：当元素数量不足时，不会报错，只是不匹配任何元素。

实际应用场景

这些选择器特别适合处理不确定数量的动态内容。

例如，在评论列表中隐藏最后两条之后的内容（配合 JS 或仅用 CSS 截断）；或者在导航菜单中为最后几个项目添加不同的颜色或图标。

另一个典型用途是表格样式：为表格最后两行添加浅色背景，提升可读性：

tr:nth-last-child(-n + 2) { background: #f8f9fa; }

基本上就这些。合理使用 nth-last-child 和 nth-last-of-type，能让你的CSS更简洁高效，减少不必要的类名和JavaScript干预。

好了，本文到此结束，带大家了解了《CSS倒序选择器使用技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！