CSS表格TH hover触发TD可见性实现求助（无类名/JS限制）

首先，你之前尝试的CSS选择器问题在于：TH和TD不在同一个父元素层级——TH属于<thead>里的<tr>，而TD属于<tbody>里的<tr>，所以>或+这类相邻/子元素选择器根本无法关联到目标TD。

结合你的限制（不能用类/ID、只能用HTML/CSS/LESS、无JS），这里提供两种可行方案：

方案1：使用CSS :has() 伪类（推荐，结构保持不变） #

has() 伪类可以让我们根据元素内部的子元素状态来选中父元素，完美解决跨层级关联的问题。配合LESS的循环可以避免重复代码：

LESS 代码 #

@menuTotal: 3; // 菜单数量，按需修改

table {
  thead th {
    cursor: pointer;
    padding: 10px;
    background-color: #f0f0f0;
  }

  tbody td {
    padding: 10px;
    border: 1px solid #ddd;
    display: none; // 默认隐藏菜单内容
  }

  // LESS循环自动生成每个菜单的悬停规则
  .generateHoverRules(@index) when (@index <= @menuTotal) {
    &:has(thead tr th:nth-child(@index):hover) {
      tbody tr td:nth-child(@index) {
        display: table-cell;
        color: red;
        background-color: #f8f8f8;
      }
    }
    .generateHoverRules(@index + 1);
  }
  .generateHoverRules(1);
}

HTML 代码（保持你原有的结构） #

<table>
 <thead><tr><th>Menu 1</th><th>Menu 2</th><th>Menu 3</th></tr></thead>
 <tbody>
 <tr>
 <td>menu 1 item</td>
 <td>menu 2 item</td>
 <td>menu 3 item</td>
 </tr>
 </tbody>
</table>

原理说明：当某一个TH被悬停时，table:has(...) 会选中整个表格，然后我们通过:nth-child(@index)精准定位到对应的TD，修改它的显示状态和样式。

方案2：调整HTML结构（兼容旧浏览器，无需:has()） #

如果你的运行环境不支持:has()（比如旧版Chrome/Firefox），可以调整HTML结构，把每个菜单标题和内容放在同一行里：

HTML 代码 #

<table>
  <tr>
    <th>Menu 1</th>
    <td>menu 1 item</td>
  </tr>
  <tr>
    <th>Menu 2</th>
    <td>menu 2 item</td>
  </tr>
  <tr>
    <th>Menu 3</th>
    <td>menu 3 item</td>
  </tr>
</table>

CSS 代码 #

table tr td {
  display: none;
  padding: 10px;
  border: 1px solid #ddd;
}

table tr th {
  cursor: pointer;
  padding: 10px;
  background-color: #f0f0f0;
}

table tr:hover td {
  display: table-cell;
  color: red;
  background-color: #f8f8f8;
}

这种方案利用了同一行内TH和TD的父子关系，通过tr:hover td直接关联，兼容性更好，但需要调整原有的表格结构。

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