如何使用CSS伪类:nth-last-child选择器_倒序子元素样式控制
:nth-last-child伪类从后往前选择子元素，适用于动态末尾样式控制；支持数字、odd/even、an+b等参数，如li:nth-last-child(-n+3)选最后三项，与:nth-child前向选择相反，且受同级所有子元素影响。
CSS 的 :nth-last-child 伪类选择器允许你从父元素的最后一个子元素开始，**倒序**选择特定位置的子元素。这个选择器非常适用于需要对末尾几个元素单独设置样式，而不关心总共有多少个子元素的场景。
基本语法与工作方式
:nth-last-child(n) 会匹配其父元素中倒数第 n 个子元素（从后往前数）。参数 n 可以是数字、关键词或公式（an + b）。
常见用法包括：- :nth-last-child(1)：选择最后一个子元素（等同于 :last-child）
- :nth-last-child(2)：选择倒数第二个子元素
- :nth-last-child(odd)：选择倒数第奇数个子元素（如倒数第1、3、5…个）
- :nth-last-child(even)：选择倒数第偶数个子元素（如倒数第2、4、6…个）
- :nth-last-child(3n+1)：从倒数第一个开始，每3个选一个
实际应用示例
假设有一个列表，你想给最后三个 添加特殊背景色：
li:nth-last-child(-n + 3) {
background-color: #ffeb3b;
}
说明：
- -n + 3 表示从倒数第1个开始，向前匹配最多3个元素
- 无论列表有5项还是10项，最后三项都会被选中
如果你想让倒数第二个元素字体变粗：
li:nth-last-child(2) {
font-weight: bold;
}
与 :nth-child 的区别
:nth-child 是从前向后数，而 :nth-last-child 是从后向前数。例如：
-
li:nth-child(2)：选择正数第二个li -
li:nth-last-child(2)：选择倒数第二个li
当子元素数量变化时，:nth-last-child 的结果保持相对稳定，更适合动态内容。
注意事项
该选择器基于所有同级子元素的位置计算，不区分标签类型。如果父元素中混有其他标签，会影响计数。
例如：
段落
span1
span2
此时 span:nth-last-child(1) 不会匹配，因为最后一个子元素是 span，但倒数第一个是它自己；而 span:nth-last-child(2) 才能
选中 span1，因为它在所有子元素中排倒数第二。
