:nth-last-child选择器可从父元素最后一个子元素开始倒序定位，用于设置特定位置子元素样式。例如li:nth-last-child(1)选中最后一个li，li:nth-last-child(-n+3)匹配倒数前三个li并添加样式，常用于高亮末尾项、去除最后几项边距或实现反向斑马纹效果。该选择器基于元素实际位置计算，需注意同级元素类型影响，推荐结合类型选择器如ul>li:nth-last-child(2)精确匹配。现代浏览器均支持（IE9+），适用于动态列表等场景。
CSS 的 :nth-last-child 选择器让你能从父元素的最后一个子元素开始，倒序定位并设置特定位置的子元素样式。它和 :nth-child 相反，不是从前往后数，而是从后往前数，非常适用于动态列表、倒数项高亮等场景。
基本语法与工作原理
:nth-last-child(n) 中的 n 表示从最后一个子元素开始向前计数的位置。例如：
-
li:nth-last-child(1)：选中最后一个
li元素 -
li:nth-last-child(2)：选中倒数第二个
li元素 - li:nth-last-child(odd)：选中倒数第奇数个（如倒数第1、3、5…）
- li:nth-last-child(even)：选中倒数第偶数个（如倒数第2、4、6…）
- li:nth-last-child(3n+1)：使用公式匹配特定模式的倒数位置
常见实用场景示例
以下是一些典型用法，帮助你理解如何在实际开发中应用该选择器。
1. 给最后三个元素添加特殊样式
立即学习“前端免费学习笔记（深入）”；
li:nth-last-child(-n + 3) {
color: red;
font-weight: bold;
}
这个选择器会匹配倒数前三个 li 元素。公式 -n + 3 表示从倒数第1个到第3个都被选中。
2. 移除最后几个元素的边框或间距
.item:nth-last-child(-n + 2) {
margin-bottom: 0;
border-bottom: none;
}
常用于卡片或列表项中，避免最后两行出现多余的下边距或分隔线。
3. 倒数奇数位元素设置背景色
tr:nth-last-child(odd) {
background-color: #f0f0f0;
}
表格中从底部开始，倒数第1、3、5行变灰，实现反向斑马纹效果。
注意事项与兼容性
:nth-last-child 依赖于元素在父容器中的实际位置，不受类名或属性影响。需要注意几点：
- 选择器计算的是同级所有子元素，如果父元素中混有不同类型标签（如
p、div），需确保目标元素是连续的或使用更精确的选择器 - 若只想针对某一类型元素倒序选择，可结合类型选择器使用，如 ul > li:nth-last-child(2)
- 现代浏览器均支持该选择器（IE9+），移动端无兼容问题
基本上就这些。掌握 :nth-last-child 能让你更灵活地控制末尾元素的样式，尤其在处理动态内容时非常实用。不复杂但容易忽略。
