在css中如何用nth-last-child倒序选择元素

在css中，nth-last-child是一个结构性伪类选择器，它从父容器的最后一个子元素开始向前计数，用来选中特定位置的元素。借助它，我们可以很方便地实现倒序选择，而不用给元素额外添加类名或修改html结构。

nth-last-child基本语法

它的语法形式和nth-child一致，只是方向相反：

/* 选择父元素中倒数第3个子元素 */
li:nth-last-child(3) {
  color: red;
}

/* 选择所有倒数位置为奇数的子元素 */
li:nth-last-child(odd) {
  background: #f0f0f0;
}

/* 从倒数第1个开始，每2个选一个 */
li:nth-last-child(2n+1) {
  font-weight: bold;
}

其中参数可以是整数、关键字（odd或even）以及形如an+b的公式。a和b为整数，n从0开始递增。

常见使用场景

去掉列表最后一项的分割线

很多导航或列表会在每项下面加一条边框，但最后一项不需要。用倒序选择可以轻松处理：

.menu li {
  border-bottom: 1px solid #ddd;
}
/* 倒数第1个不要底边框 */
.menu li:nth-last-child(1) {
  border-bottom: none;
}

高亮倒数第二个按钮

假设一组操作按钮里，希望倒数第二个作为主要辅助按钮突出显示：

.btn-group button:nth-last-child(2) {
  background: #007bff;
  color: #fff;
}

与nth-child的区别

两者公式写法完全一样，但计数起点不同。可以通过以下对比理解：

注意事项

• nth-last-child计数时包含所有子元素类型，不只是当前指定的标签。如果父元素里混有文本节点和其他标签，位置可能和你预期不同。
• 若只想在同类标签中倒序选择，可考虑nth-last-of-type。
• 该选择器在主流现代浏览器中均受支持，可放心使用。

完整示例

下面一段代码演示了如何给一个无序列表的倒数第1、2、3项分别设置不同样式：

<ul class="list">
  <li>项目一</li>
  <li>项目二</li>
  <li>项目三</li>
  <li>项目四</li>
  <li>项目五</li>
</ul>

<style>
.list li:nth-last-child(1) {
  color: green;
}
.list li:nth-last-child(2) {
  color: orange;
}
.list li:nth-last-child(3) {
  color: red;
}
</style>

以上写法让你无需改动html，就能用css完成从末尾开始的灵活选中和样式控制。

cssnth-last-child倒序选择伪类选择器结构性伪类修改时间：2026-07-25 00:57:10