CSS nth-last-child倒序选择器使用教程

  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 的结果保持相对稳定，更适合动态内容。

注意事项

该选择器基于所有同级子元素的位置计算，不区分标签类型。如果父元素中混有其他标签，会影响计数。

  <div>
    <p>段落</p>
    <span>span1</span>
    <span>span2</span>
  </div>

此时 span:nth-last-child(1) 不会匹配，因为最后一个子元素是 span，但倒数第一个是它自己；而 span:nth-last-child(2) 才能选中 span1，因为它在所有子元素中排倒数第二。

到这里，我们也就讲完了《CSS nth-last-child倒序选择器使用教程》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！