:nth-last-child()伪类从父元素最后一个子元素倒序选择，语法为selector:nth-last-child(n)，n可为数字、关键字或公式；如li:nth-last-child(1)选中最后一个li，li:nth-last-child(2n)选中倒数偶数位元素，li:nth-last-child(-n+3)选中最后3个，结合其他伪类可实现精确控制，适用于未知子元素总数时的样式设计，如导航菜单末尾加边距或移动端隐藏末尾条目。
在 CSS 中，:nth-last-child() 伪类可以让你从父元素的最后一个子元素开始，倒序选择特定位置的元素。它和 :nth-child() 类似，但计数方向相反 —— 从后往前数。
基本语法
selector:nth-last-child(n) { /* 样式规则 */ }
其中 n 可以是数字、关键字或公式（如 2n+1）。
常见用法示例
1. 选择倒数第一个元素
li:nth-last-child(1) { color: red; }
这会选中最后一个 li 元素。
立即学习“前端免费学习笔记（深入）”；
2. 选择倒数第二个元素
li:nth-last-child(2) { background: yellow; }
适用于任何列表中倒数第二项的高亮。
3. 使用公式选择多个倒序元素
Ai Mailer
使用Ai Mailer轻松制作电子邮件
49 查看详情 li:nth-last-child(2n) { opacity: 0.8; }
这会从倒数开始，选中所有偶数位置的元素（即原顺序中的某些奇数项，取决于总数量）。
4. 结合偏移值：倒数第3个开始的所有元素
li:nth-last-child(-n+3) { font-weight: bold; }
这个写法的意思是：“从倒数第3个开始，往前所有元素”，也就是最后3个都会被选中。
5. 配合其他伪类更精确控制
li:nth-last-child(2):nth-first-child(5) { border: 1px solid green; }
例如：只有当列表有5个元素时，倒数第二个（也就是正数第4个）才会被选中。
实用场景建议
当你不知道子元素总数，但想样式化最后几个项时，:nth-last-child 非常有用，比如导航菜单末尾加边距。移动端适配中隐藏最后几个不重要的条目：li:nth-last-child(-n+2) { display: none; }倒序交替斑马线效果（结合 :nth-last-child(2n)）。
基本上就这些。关键在于理解“倒着数”的逻辑，并结合公式灵活使用。不复杂但容易忽略细节。
以上就是在css中如何用nth-last-child倒序选择元素的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1012633.html
微信扫一扫 
支付宝扫一扫 
