如何通过CSS的:nth-last-child选择器高效选取列表尾部元素？

本文共计1288个文字，预计阅读时间需要6分钟。

直接使用`nth-last-child(n)就能从尾部向前数，选择第+n个元素。它与`nth-child(n)`方向相反，但匹配逻辑相同：

比如想选列表里倒数第二个 <li>，写成：

li:nth-last-child(2) { color: red; }

• 注意：这里的 2 是“倒数第 2 个”，不是“索引为 2”（CSS 里没索引 0 的概念）
• 如果父元素末尾有非 <li> 元素（比如 <div> 或注释节点），:nth-last-child(2) 可能匹配不到任何 <li> —— 因为它数的是所有子元素，不是仅 <li>
• 支持表达式写法，如 :nth-last-child(3n+1) 表示倒数第 1、4、7… 个子元素

:nth-last-child 和 :nth-last-of-type 到底该用哪个？

关键区别在于是否“跳过其他类型”。如果你的列表结构干净（全是 <li>），两者效果一致；但一旦混入其他标签（比如 <li> 后跟 <footer>），结果就不同了。