CSS :nth-last-child伪类选择器用于选择属于其父元素的倒数第n个子元素，和:nth-child选择器的逻辑相反，它从最后一个子元素开始向前计数匹配，在需要针对末尾元素做特殊样式处理的场景中非常实用。
:nth-last-child选择器基础语法
该选择器的语法格式为:nth-last-child(an+b)，其中a和b是可选的参数，支持多种匹配规则：
- 直接传入数字n：匹配倒数第n个子元素，比如
:nth-last-child(1)匹配最后一个子元素 - 使用even关键字：匹配倒数第偶数个子元素
- 使用odd关键字：匹配倒数第奇数个子元素
- 使用an+b公式：比如
:nth-last-child(2n+1)匹配倒数第1、3、5...个子元素
常见应用场景实现
场景一：列表末尾元素特殊样式
当列表的最后一个元素需要和前面的元素样式不同时，比如去掉最后一个元素的下边框，可以直接使用:nth-last-child(1)匹配：
/* 列表容器样式 */
.list {
list-style: none;
padding: 0;
margin: 0;
}
/* 列表项基础样式 */
.list li {
padding: 12px 16px;
border-bottom: 1px solid #eee;
}
/* 最后一个列表项去掉下边框 */
.list li:nth-last-child(1) {
border-bottom: none;
}
场景二：倒序奇偶行高亮
如果需要对列表从后往前的奇偶行设置不同背景色，比如倒数奇数行浅灰背景，倒数偶数行白色背景，可以使用odd和even参数：
/* 倒数奇数行背景色 */
.list li:nth-last-child(odd) {
background-color: #f5f5f5;
}
/* 倒数偶数行背景色 */
.list li:nth-last-child(even) {
background-color: #ffffff;
}
场景三：匹配倒数第n到倒数第m个元素
如果需要给倒数第2到第4个元素设置特殊样式，可以结合公式实现，比如给倒数第2、3、4个元素添加红色文字：
/* 匹配倒数第2、3、4个元素 */
.list li:nth-last-child(-n+4):not(:nth-last-child(-n+1)) {
color: #ff4444;
}
这里的:nth-last-child(-n+4)匹配倒数第1到4个元素，:not(:nth-last-child(-n+1))排除倒数第1个元素，最终就得到倒数第2到4个元素。
场景四：表格倒序行样式处理
在表格中如果需要给最后三行添加特殊标记，比如浅黄色背景，可以使用如下代码：
/* 表格基础样式 */
table {
border-collapse: collapse;
width: 100%;
}
table td {
border: 1px solid #ddd;
padding: 8px;
}
/* 表格最后三行背景色 */
table tr:nth-last-child(-n+3) {
background-color: #fffde7;
}
使用注意事项
- :nth-last-child选择的是父元素下所有类型的子元素，如果父元素下有多种标签，会一起计数，需要精准匹配某类标签时可以写成
li:nth-last-child(1)的形式 - 计数从1开始，不是从0开始，倒数第1个就是最后一个元素
- 如果父元素的子元素数量不足n，对应的匹配规则不会生效，不会报错
- 该选择器是CSS3新增特性，如果需要兼容非常老旧的浏览器，需要提前确认兼容性情况
注意：如果只需要匹配最后一个元素，除了
:nth-last-child(1)，还可以使用:last-child选择器，两者效果一致，后者语义更明确。
CSSnth-last-child伪类选择器前端样式修改时间：2026-07-14 17:33:27