:nth-last-of-type(n) 用于从父元素末尾开始选择倒数第 n 个指定标签类型的子元素。例如 p:nth-last-of-type(1) 选中最后一个 p 元素，li:nth-last-of-type(2) 选中倒数第二个 li。结合 CSS 计数器可实现倒序编号：通过 counter-reset 定义计数器，counter-increment 设为 -1 实现递减，再用 ::before 插入编号。也可对末尾元素单独设置样式，如 p:nth-last-of-type(-n+2) 隐藏最后两个段落，li:nth-last-of-type(-n+3) 为倒数前三项添加红色边框，button:nth-last-of-type(2) 单独设置倒数第二个按钮背景色。支持公式 an+b，如 tr:nth-last-of-type(2n) 选中倒数偶数行，div:nth-last-of-type(3n+1) 从倒数第一项起每三项选一项。该选择器按元素类型从后向前匹配，适用于动态内容末尾的样式控制，关键在于理解其基于类型和逆向计数的机制。
使用 :nth-last-of-type 可以从父元素的最后一个子元素开始反向计数，为倒数第几个匹配类型的元素设置样式。它常用于实现倒序排列的视觉效果或特定位置的样式控制。
基本语法与工作原理
:nth-last-of-type(n) 选择器会选中其父元素中倒数第 n 个指定类型的元素。这里的“类型”指的是标签名，比如 p、div、li 等。
例如：
p:nth-last-of-type(1)：选中最后一个
元素 li:nth-last-of-type(2)：选中倒数第二个
实现倒序编号效果
如果想让列表项显示为倒序编号（如 5,4,3,2,1），可以用 CSS 计数器配合 :nth-last-of-type 实现。
立即学习“前端免费学习笔记（深入）”；
pre{ counter-reset: section;}li { counter-increment: section -1;}li::before { content: “No.” counter(section);}
这里虽然没有直接用 :nth-last-of-type 控制顺序，但它可以用来对倒数位置的元素单独设置样式，比如高亮最后三项。
Pic Copilot
AI时代的顶级电商设计师，轻松打造爆款产品图片
158 查看详情
为倒数几个元素设置特殊样式
常见需求是给最后几个元素添加不同颜色或隐藏处理。
隐藏最后两个段落：p:nth-last-of-type(-n+2) { display: none; } 给倒数前三项加红色边框：li:nth-last-of-type(-n+3) { border: 1px solid red; } 只对倒数第二个按钮设置背景：button:nth-last-of-type(2) { background: yellow; }
结合公式灵活控制
:nth-last-of-type(an + b) 支持数学表达式，可用于更复杂的选择。
例如：
tr:nth-last-of-type(2n)：选中倒数第偶数行的表格行 div:nth-last-of-type(3n+1)：从倒数第一项开始，每3项选一个
基本上就这些。通过合理使用 :nth-last-of-type，你可以轻松实现基于倒序位置的样式控制，特别适合动态内容末尾的视觉调整。关键是理解它是按类型从后往前数的。不复杂但容易忽略细节。
以上就是如何用css :nth-last-of-type实现倒序样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1050563.html
微信扫一扫 
支付宝扫一扫 
