能否通过纯CSS在hover元素时修改/移除同级类样式？

嘿，这个问题我太熟了！咱们先明确一点：纯CSS里的选择器有天生的限制——它只能选中当前元素之后的同级元素，没法直接选中所有同级里的特定类（比如所有带.active的兄弟），不过别慌，还是有办法实现你要的效果的，我给你拆解两种思路：

一、最优方案：用:has()选择器实现全同级覆盖 #

:has()是CSS选择器4的新特性，现在主流浏览器（Chrome、Edge、Safari，还有新版Firefox）都支持了，它能帮我们检测父元素是否包含满足条件的子元素，完美解决“选中所有同级.active”的问题。

修改你的SCSS代码如下：

$primary-blue: #007bff;

ul {
  padding: 0;
  margin: 0;

  // 当ul内有任意li被hover时，所有.active的子元素修改样式
  &:has(li:hover) .item.active {
    background-color: lighten($primary-blue, 30%); // 把背景调浅
    color: $primary-blue; // 文字变回蓝色
    transition: all 0.2s ease; // 加个过渡动画更丝滑
  }

  // 特殊情况：如果hover的就是那个.active的li，要保持原样式
  li.item.active:hover {
    background-color: $primary-blue;
    color: white;
  }

  li {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;
    transition: all 0.2s ease;

    &.active {
      background-color: $primary-blue;
      color: white;
    }
  }
}

逻辑说明： #

1. 利用ul:has(li:hover)检测父元素ul下是否有li被hover，一旦有，就修改所有.item.active的样式；
2. 单独给li.item.active:hover设置样式，避免hover自身时被上面的规则覆盖，保证交互一致性。

二、兼容旧浏览器的替代方案（仅能覆盖后续同级） #

如果你的项目需要兼容不支持:has()的旧版浏览器（比如Firefox 121之前的版本），那只能用传统的兄弟选择器，但它只能选中hover元素之后的同级.active元素，前面的没法选中：

$primary-blue: #007bff;

ul {
  padding: 0;
  margin: 0;

  li {
    cursor: pointer;
    list-style: none;
    padding: 12px 16px;
    transition: all 0.2s ease;

    &.active {
      background-color: $primary-blue;
      color: white;
    }

    // 选中当前hover元素之后的所有.active兄弟
    &:hover ~ .item.active {
      background-color: lighten($primary-blue, 30%);
      color: $primary-blue;
    }
  }
}

局限性： #

这个方案只能修改hover元素后面的.active元素，比如你hover name2时，只能修改name3、name4里的active，没法修改前面的name1，所以如果你的.active元素位置不固定，这个方案就不太适用。

最后补充 #

如果必须实现“不管active在哪个位置，hover任意li都能修改它”，又要兼容旧浏览器，那只能借助一点点JavaScript来辅助——监听li的mouseover和mouseout事件，给ul添加/移除一个自定义类（比如has-hover），然后通过这个类来控制.active的样式，不过这就不算纯CSS了。

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