css伪类:nth-last-child应用实例

:nth-last-child 伪类选择器用于从父元素最后一个子元素开始反向计数选中特定位置的子元素。1. 使用 li:nth-last-child(2) 可选中倒数第二个 li，如“第3项”被高亮；2. li:nth-last-child(2n+1) 选中从后往前的奇数位元素，倒数第1、3、5等添加红色下边框；3. li:not(:nth-last-child(-n+3)) 将非最后三项设为半透明，突出最新数据；4. li:nth-last-child(n+4) 为倒数第4个及之前的元素设置下边距，实现前部卡片留白、末尾紧凑布局。该选择器适用于动态或响应式列表，在不改动HTML结构时精准控制样式。

在CSS中，:nth-last-child 是一个非常实用的伪类选择器，它允许你从父元素的最后一个子元素开始反向计数来选择特定位置的子元素。这个选择器特别适合处理动态内容或响应式布局中的样式控制。下面通过几个实际例子帮助你理解它的用法。

1. 选择倒数第二个子元素

如果你想为列表中倒数第二个 li 添加特殊样式，可以这样写：

HTML:

CSS:

立即学习“前端免费学习笔记（深入）”；

效果是“第3项”会被高亮，因为它是倒数第二个 li 元素。

2. 奇数位置（从后往前）加边框

使用公式 nth-last-child(2n+1) 可以选择从末尾开始的奇数位置元素。

CSS:

立即学习“前端免费学习笔记（深入）”；

在这个例子中，倒数第1、3、5……个 li 都会添加红色下边框。注意：如果总数量变化，被选中的元素也会随之改变。

AppMall应用商店

AI应用商店，提供即时交付、按需付费的人工智能应用服务

56

查看详情

3. 忽略最后三项之外的所有项

常见于只对最近几条数据进行样式处理，比如日志或消息列表。

CSS:

立即学习“前端免费学习笔记（深入）”；

这段代码的意思是：不是倒数前3个的 li，都设置半透明。视觉上突出显示最新的三条记录。

4. 为倒数第n个之后的元素统一设置外边距

例如，在卡片布局中，希望倒数第3个之前的卡片底部留出更多空间。

CSS:

立即学习“前端免费学习笔记（深入）”；

这表示从倒数第4个开始（包括），前面所有的卡片都有 20px 的下边距，而最后三个则没有，可用于收尾区域紧凑排列。

基本上就这些常见用法。掌握 :nth-last-child 能让你更灵活地控制结构未知或长度可变的列表样式，尤其在不修改HTML的情况下实现精准定位。关键是理解“从后往前”的逻辑，并结合函数表达式灵活使用。

以上就是css伪类:nth-last-child应用实例的详细内容，更多请关注php中文网其它相关文章！