CSS :has(:hover)选择器失效问题及表格行联动高亮方案咨询

关于:has(+ .b:hover)失效的原因 #

目前部分较早版本的浏览器对:has选择器内部嵌套交互类伪类（如:hover）的支持不完善，这会导致你写的选择器无法触发预期效果。虽然最新版Chrome已经支持该语法，但为了更好的兼容性，推荐使用更稳妥的方案。

替代实现方案 #

1. 针对你的div示例：利用父容器统一控制

给两个关联元素添加父容器，通过父容器的hover状态同步控制两个子元素的样式，兼容性覆盖所有现代浏览器：

HTML代码：

<div class="group">
  <div class="a"></div>
  <div class="b"></div>
</div>

CSS代码：

.a, .b {
  width: 100px;
  height: 100px;
  background: green;
  margin: 25px;
}

.group:hover .a,
.group:hover .b {
  background: pink;
}

2. 针对你的表格原始需求：关联行同步高亮

最简洁且兼容性好的方式是把需要关联的两行放入同一个<tbody>容器，通过容器的hover状态实现两行同步高亮：

HTML代码：

<table border="1" cellpadding="8">
  <!-- 关联行组 -->
  <tbody class="linked-rows">
    <tr>
      <td>第一行数据</td>
      <td>第一行详情</td>
    </tr>
    <tr>
      <td>第二行数据</td>
      <td>第二行详情</td>
    </tr>
  </tbody>
  <!-- 普通行 -->
  <tbody>
    <tr>
      <td>独立行数据</td>
      <td>独立行详情</td>
    </tr>
  </tbody>
</table>

CSS代码：

table tr {
  background-color: #ffffff;
  transition: background-color 0.2s;
}

.linked-rows:hover tr {
  background-color: #f5f5f5;
}

如果不想额外添加<tbody>，也可以用相邻兄弟选择器结合:has（仅支持现代浏览器）：

/* 悬停第一行时，同步高亮第二行 */
tr.linked-row:hover,
tr.linked-row:hover + tr.linked-row {
  background-color: #f5f5f5;
}
/* 悬停第二行时，同步高亮第一行 */
tr.linked-row:has(+ tr.linked-row:hover) {
  background-color: #f5f5f5;
}

总结 #

• 优先选择父容器控制的方案，兼容性最好，无需依赖:has选择器
• 表格场景使用<tbody>分组是最简洁的实现方式
• 若坚持使用兄弟元素选择器，确保浏览器为最新版本（Chrome 105+、Firefox 121+）以支持:has内部嵌套:hover的语法

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