如何实现鼠标悬停table的th元素时，联动修改下方td元素样式？

原代码的问题 #

1. CSS选择器逻辑错误：th.topcell:hover.item是无效语法，且逻辑完全不对——它试图匹配同时拥有topcell和item类的<th>元素在hover状态的样式，而非当<th>被hover时选中下方的<td>单元格。
2. 样式目标不匹配：原CSS中tr.item指向<tr>元素，但HTML里item类是加在<td>上的，导致样式根本无法应用到目标单元格。

修正后的代码 #

方案1：利用兄弟选择器（兼容性较好） #

浏览器会自动将<thead>之后的<tr>包裹到<tbody>中，因此可以通过<thead>的hover状态控制后续<tbody>内的单元格：

/* 外部CSS文件内容 */
th.topcell {
  color: black;
  background-color: blue;
}

td.item { /* 修正为td.item，对应HTML里的类 */
  background-color: aquamarine;
  color: black;
  transition: all 0.3s; /* 可选：添加过渡动画让变色更平滑 */
}

/* 当thead被hover时，选中后续tbody里的所有td.item */
thead:hover ~ tbody .item {
  background-color: green;
  color: white;
}

HTML可手动补充<tbody>让结构更规范（浏览器也会自动生成）：

<table>
  <thead>
    <th class="topcell">fruit</th>
  </thead>
  <tbody>
    <tr>
      <td class="item">banana</td>
    </tr>
    <tr>
      <td class="item">orange</td>
    </tr>
    <tr>
      <td class="item">apple</td>
    </tr>
  </tbody>
</table>

方案2：使用:has()选择器（精准匹配th hover，需现代浏览器支持） #

如果需要严格只在th.topcell被hover时触发样式变化，可以用CSS的:has()选择器：

th.topcell {
  color: black;
  background-color: blue;
}

td.item {
  background-color: aquamarine;
  color: black;
  transition: all 0.3s;
}

/* 当表格包含hover状态的th.topcell时，选中所有td.item */
table:has(th.topcell:hover) .item {
  background-color: green;
  color: white;
}

效果说明 #

鼠标悬停在顶部<th>单元格时，下方所有带item类的<td>会变为绿色背景、白色文字；鼠标移出后自动恢复原样式。

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