如何使用选择器同时定位选中最后三个列表元素？

核心使用CSS :nth-last-child() 伪类选择器即可实现批量匹配，不需要逐个选中单个元素。

CSS 样式选中写法 #

直接给选择器传参 -n+3，就会自动从列表末尾往前数，匹配最后3个元素，和列表总长度无关：

/* 匹配所有列表下的最后3个li元素 */
li:nth-last-child(-n+3) {
  /* 自定义样式即可，比如高亮标记 */
  background: #f0f9ff;
  border-left: 3px solid #1677ff;
}

选择器逻辑说明：

• 计数方向从父容器的最后一个子元素开始倒序计算
• -n+3 这个公式会命中倒序位置为1、2、3的三个元素，正好对应最后3个列表项
• 兼容所有现代浏览器，不需要额外写多个选择器逐个匹配

JS 定位获取DOM的写法 #

如果是要在脚本里拿到这三个元素做交互，直接用同一个选择器即可：

// 一次性获取到最后3个列表元素的DOM集合
const last3ListItems = document.querySelectorAll('li:nth-last-child(-n+3)');

内容的提问来源于stack exchange，提问作者user19251251