能否仅用CSS为最后n个带s类的<li>元素设置条件样式？

当然可以实现，下面提供两种可行方案：

一、纯CSS方案（有局限性） #

如果你的浏览器支持CSS :has() 选择器（Chrome 105+、Edge 105+，Firefox需开启实验特性），可以用它定位最后n个带s类的<li>元素。比如要修改最后3个的颜色为蓝色：

/* 原有样式 */
li.s {
  color: red;
}

/* 修改最后3个.s元素的颜色 */
ul:has(li.s:nth-last-child(-n+3)) li.s:nth-last-child(-n+3) {
  color: blue;
}

局限性：

• 依赖:has()选择器，兼容性有限；
• 若列表中.s元素的位置不固定，或n值需要动态调整，纯CSS很难适配。

二、JavaScript方案（通用可靠） #

这种方法不受结构和浏览器限制，适合所有场景，推荐使用。我们可以通过JS选中所有.s元素，然后给最后n个添加自定义类或直接修改样式：

方式1：直接修改样式 #

const targetCount = 3; // 要修改的最后n个元素数量
const sElements = document.querySelectorAll('li.s');
const startIndex = Math.max(0, sElements.length - targetCount);

// 遍历最后n个元素修改颜色
for (let i = startIndex; i < sElements.length; i++) {
  sElements[i].style.color = 'blue';
}

方式2：添加自定义类（推荐，样式与行为分离） #

先在CSS中定义自定义类的样式：

li.s {
  color: red;
}

/* 自定义类样式 */
li.s.last-target {
  color: blue;
}

再用JS给目标元素添加类：

const targetCount = 3;
const sElements = document.querySelectorAll('li.s');
const startIndex = Math.max(0, sElements.length - targetCount);

for (let i = startIndex; i < sElements.length; i++) {
  sElements[i].classList.add('last-target');
}

这种方式更易维护，后续修改样式只需调整CSS即可。

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