如何用纯CSS实现多组同级元素hover时批量高亮（无需重复规则）

问题描述 #

当鼠标悬停在group-1的任意一行时，所有group-1行都会改变背景色。现在需要将此逻辑应用到300个各含3行的分组，无需复制300次CSS规则，能否仅通过纯CSS实现？

原实现代码如下：

CSS #

.parent:has(.group-1:hover) .group-1 {
  background-color: blue;
}

HTML #

<body class="parent">
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-1">Group 1</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-2">Group 2</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
  <p class="group-3">Group 3</p>
</body>

纯CSS解决方案 #

方案1：调整HTML结构（最优解，兼容性好） #

给每个分组单独套一个容器，利用父容器的:hover事件控制内部所有元素的样式，仅需一条CSS规则：

修改后的HTML

<body class="parent">
  <div class="group">
    <p>Group 1</p>
    <p>Group 1</p>
    <p>Group 1</p>
  </div>
  <div class="group">
    <p>Group 2</p>
    <p>Group 2</p>
    <p>Group 2</p>
  </div>
  <!-- ... 重复此结构到第300个分组 -->
</body>

对应CSS

/* 鼠标悬停在分组容器时，内部所有p标签高亮 */
.group:hover p {
  background-color: blue;
}

这种方法无需重复编写规则，兼容性覆盖所有支持:hover的浏览器，是最简洁高效的方案。

方案2：不修改原有HTML结构（依赖:has()特性） #

如果无法调整HTML结构，可利用CSS的:has()伪类结合属性选择器实现，无需手动复制300次规则：

修改后的HTML（添加数据属性标记分组）

<body class="parent">
  <p class="group-1" data-group="1">Group 1</p>
  <p class="group-1" data-group="1">Group 1</p>
  <p class="group-1" data-group="1">Group 1</p>
  <p class="group-2" data-group="2">Group 2</p>
  <p class="group-2" data-group="2">Group 2</p>
  <p class="group-2" data-group="2">Group 2</p>
  <!-- ... 所有分组添加对应data-group属性 -->
</body>

对应CSS（结合预处理器自动生成规则）

纯CSS本身不支持循环，但可借助CSS预处理器（如Sass）的循环自动生成300条规则，无需手动编写：

@for $i from 1 through 300 {
  .parent:has([data-group="#{$i}"]:hover) [data-group="#{$i}"] {
    background-color: blue;
  }
}

编译后会自动生成对应300个分组的CSS规则，实现批量高亮效果。

注：:has()伪类目前仅支持Chrome、Edge、Safari等现代浏览器，如需兼容旧版浏览器，优先选择方案1。

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