如何选中带有active类的<li>元素之前的所有<li>元素（排除之后的）

要实现选中示例HTML中active类<li>之前的所有<li>，同时排除active元素本身及其后续的<li>，可以用以下两种方案：

CSS方案（现代浏览器支持） #

利用CSS的:has()伪类选择器，直接匹配符合条件的元素：

li:has(~ li.active) {
  /* 自定义样式，例如高亮背景 */
  background-color: #f5f5f5;
}

原理说明：

• li:has(~ li.active)会选中所有后面存在带有active类的<li>兄弟元素的<li>，刚好对应active元素之前的所有目标元素。
• active元素本身后面没有符合条件的兄弟，不会被选中；其后续的<li>也不满足“后面有active类<li>”的条件，因此也不会被选中。

JavaScript方案（兼容旧版浏览器） #

如果需要兼容不支持:has()的浏览器（如旧版Firefox），可以用JS手动获取并处理目标元素：

// 定位到active类的li元素
const activeLi = document.querySelector('li.active');
// 收集它前面的所有li兄弟
const targetLis = [];
let prevElement = activeLi.previousElementSibling;

while (prevElement) {
  if (prevElement.tagName === 'LI') {
    targetLis.unshift(prevElement); // 保持元素顺序与DOM中一致
  }
  prevElement = prevElement.previousElementSibling;
}

// 给目标元素添加样式或执行其他操作
targetLis.forEach(li => {
  li.style.backgroundColor = '#f5f5f5';
});

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