是否存在CSS反向通用兄弟选择器？相关实现方案问询

好问题！目前标准CSS里还没有原生的反向通用兄弟选择器（也就是和~作用完全相反，能选中目标元素之前所有同级元素的选择器）。不过我们有几种实用的方案可以实现你想要的效果，下面逐一说明：

1. 利用CSS :has()伪类（现代浏览器首选） #

:has()是CSS选择器4新增的特性，它允许我们基于后续兄弟元素的存在来匹配当前元素。要选中.selected之前的所有同级div，我们可以直接用:has(~ .selected)来匹配后面存在.selected同级元素的div：

/* 选中.selected之前的所有同级div */
.numbers div:has(~ .selected) {
  color: blue; /* 示例样式，可按需修改 */
}

/* 保留你原来的样式 */
.selected { font-weight: bold; }
.selected ~ div { color: red; }

兼容性说明 #

~选择器是CSS2就支持的特性，而:has()目前已经被绝大多数现代浏览器支持（Chrome、Firefox 121+、Safari 15.4+等），如果你的项目不需要兼容老旧浏览器，这是最简洁直观的方案。

2. 全局样式+覆盖法（全浏览器兼容） #

如果需要兼容不支持:has()的老浏览器（比如旧版IE、Firefox 120及以下），可以用"先全局设置样式，再覆盖不需要的元素"的技巧：

/* 先给所有同级div设置"选中元素之前的元素"的样式 */
.numbers div {
  color: blue;
}

/* 覆盖.selected本身的样式，恢复你想要的效果 */
.selected {
  font-weight: bold;
  color: initial; /* 或者设置成你需要的默认颜色 */
}

/* 覆盖.selected之后的元素样式，保持你原来的红色 */
.selected ~ div {
  color: red;
}

这个思路很巧妙：先统一给所有div应用目标样式，然后把.selected本身和它之后的元素样式重新覆盖掉，最后就只有.selected之前的元素保留了我们想要的样式。这种方法兼容性拉满，支持所有能识别CSS2选择器的浏览器。

3. JavaScript辅助实现（复杂交互场景） #

如果你的需求涉及更复杂的动态逻辑（比如频繁切换选中状态、需要额外的交互效果），可以用JavaScript来手动给目标元素添加类名，再通过CSS类来控制样式：

JavaScript代码 #

// 给每个数字div绑定点击事件
document.querySelectorAll('.numbers div').forEach(div => {
  div.addEventListener('click', () => {
    // 先移除所有div的selected类和before-selected类
    document.querySelectorAll('.numbers div').forEach(el => {
      el.classList.remove('selected', 'before-selected');
    });
    // 给当前点击的div添加selected类
    div.classList.add('selected');
    // 遍历当前元素之前的所有同级div，添加before-selected类
    let prevSibling = div.previousElementSibling;
    while (prevSibling) {
      if (prevSibling.tagName === 'DIV') {
        prevSibling.classList.add('before-selected');
      }
      prevSibling = prevSibling.previousElementSibling;
    }
  });
});

CSS代码 #

.selected { font-weight: bold; }
.selected ~ div { color: red; }
/* 给选中元素之前的div设置样式 */
.before-selected { color: blue; }

这种方法灵活性最高，能应对各种复杂场景，缺点是需要编写额外的JS代码。

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