如何为列表中最后一个带有active类的<li>元素添加CSS样式？

嘿，我来帮你搞定这个需求！先看你给出的HTML结构：

<ul>
  <li class="active"></li>
  <li class="active"></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

你要选中的是列表里最后一个带active类的<li>（也就是上面例子里的第二个<li>），下面给你几种不同场景下的解决方案：

方法1：用CSS :has() 选择器（现代浏览器首选） #

这是最直观的写法，直接精准定位到最后一个active项，不需要绕弯：

ul li.active:not(:has(+ li.active)) {
  /* 这里写你的样式，比如： */
  background-color: #ff4444;
  color: white;
  padding: 8px;
}

简单解释下：

• li.active先选中所有带active类的列表项
• :not(:has(+ li.active))的意思是“排除掉后面紧接着还有一个active列表项的元素”，剩下的自然就是最后一个active项啦

⚠️ 注意：:has()已经被Chrome 101+、Firefox 121+、Safari 15.4+这些现代主流浏览器支持，如果你的项目不用兼容老浏览器，这个方法绝对是最优解。

方法2：相邻兄弟选择器（兼容旧浏览器） #

如果需要兼容不支持:has()的旧浏览器（比如老版本的Firefox或IE），可以用反向思路来实现：

/* 先给所有active项设置基础样式 */
ul li.active {
  background-color: #ff4444;
  color: white;
  padding: 8px;
}

/* 然后把后面还跟着active项的那些active元素的样式重置（也就是非最后一个的active项） */
ul li.active + li.active {
  background-color: transparent;
  color: inherit;
  padding: initial;
  /* 或者改成你想要的非最后一个active项的样式 */
}

这个方法的逻辑是：先给所有active项加样式，再把“后面还有active项”的那些元素的样式覆盖掉，最后就只剩真正的最后一个active项保留样式了。

方法3：JavaScript辅助（极端兼容场景） #

要是上面的CSS方法都满足不了你的兼容要求，那就用JS来帮忙标记最后一个active项：

// 找到目标ul
const targetUl = document.querySelector('ul');
// 获取所有带active类的li
const activeItems = targetUl.querySelectorAll('li.active');

// 如果有active项，给最后一个加个专属类
if (activeItems.length > 0) {
  const lastActiveItem = activeItems[activeItems.length - 1];
  lastActiveItem.classList.add('last-active');
}

然后在CSS里针对这个专属类写样式就行：

ul li.last-active {
  background-color: #ff4444;
  color: white;
  padding: 8px;
}

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