仅使用CSS实现点击tbody>td后高亮对应thead>th是否可行？

仅用CSS可以实现点击<tbody>td后高亮对应<thead>th的效果，核心依赖CSS的:has()父选择器（目前主流浏览器已逐步支持），结合:nth-child()匹配对应列的序号来完成。

实现步骤与代码示例 #

首先需要让表格的<td>具备可聚焦性（默认<td>不能被聚焦），通过添加tabindex="0"属性实现；然后利用:has()检测表格内是否有聚焦的<td>，再通过:nth-child()匹配对应列的表头。

HTML结构

<table>
  <thead>
    <tr>
      <th>订单编号</th>
      <th>客户名称</th>
      <th>订单金额</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td tabindex="0">SO-001</td>
      <td tabindex="0">张三</td>
      <td tabindex="0">¥1200</td>
      <td tabindex="0">已完成</td>
    </tr>
    <tr>
      <td tabindex="0">SO-002</td>
      <td tabindex="0">李四</td>
      <td tabindex="0">¥800</td>
      <td tabindex="0">待发货</td>
    </tr>
  </tbody>
</table>

CSS样式

/* 基础表格样式 */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 2rem 0;
}
th, td {
  border: 1px solid #eee;
  padding: 0.8rem;
  text-align: left;
}
th {
  background-color: #f8f8f8;
}
td {
  cursor: pointer;
}
td:focus {
  outline: none; /* 可选：移除默认聚焦边框 */
  background-color: #e6f3fa;
}

/* 核心高亮逻辑：匹配对应列的表头 */
table:has(tbody td:focus:nth-child(1)) thead th:nth-child(1),
table:has(tbody td:focus:nth-child(2)) thead th:nth-child(2),
table:has(tbody td:focus:nth-child(3)) thead th:nth-child(3),
table:has(tbody td:focus:nth-child(4)) thead th:nth-child(4) {
  background-color: #c7e5f6;
  font-weight: 700;
}

关键说明与局限性 #

1. 浏览器兼容性：:has()选择器目前在Chrome、Edge、Safari 15.4+中已原生支持，Firefox需要手动开启layout.css.has-selector.enabled配置项（在about:config中设置）。如果需要兼容旧版浏览器，这个方案就不适用，还是得用JavaScript。
2. 聚焦状态依赖：必须给<td>添加tabindex="0"，否则无法触发:focus状态，也就无法触发表头高亮。点击<td>后会保持高亮，直到<td>失去焦点（比如点击页面其他区域）。
3. 切换式高亮限制：如果需要实现“点击切换高亮状态”（比如点击一次高亮，再点击取消），仅用CSS很难做到，这种场景还是需要JavaScript辅助。

总结 #

如果你的目标浏览器都支持:has()选择器，仅用CSS完全可以实现这个需求；如果需要更广泛的兼容性或者复杂的交互逻辑，JavaScript仍是更稳妥的选择。

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