鼠标悬停首行/表头时显示表格最后一行的CSS问题排查

之前已实现鼠标悬停表格行时显示该行最后一列的效果，对应代码如下：

原实现代码 #

HTML代码 #

<table>
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Content1</td>
      <td>Content2</td>
      <td><a href="#">Edit</a></td>
    </tr>
    <tr>
      <td>Content3</td>
      <td>Content4</td>
      <td><a href="#">Edit</a></td>
    </tr>
    <tr>
      <td>Content5</td>
      <td>Content6</td>
      <td><a href="#">Edit</a></td>
    </tr>
  </tbody>
</table>

CSS代码 #

table {
  margin: 0 auto;
}

tr > td:last-child {
  display: none;
}

tr:hover > td:last-child {
  display: block;
}

现在要实现鼠标悬停表头时显示表格最后一行，但编写的CSS代码无效，无效代码如下：

tr:last-child {
  display: none;
}

th:hover > tr:last-child {
  display: block;
}

无效原因分析 #

1. 选择器逻辑错误：th:hover > tr:last-child 表示“悬停的<th>元素的直接子元素里的最后一个<tr>”，但<th>的父元素是<tr>，<th>本身没有<tr>子元素，这个选择器根本匹配不到任何元素。
2. 元素关联错误：表头的<tr>在<thead>标签内，最后一行<tr>在<tbody>标签内，二者属于<table>下的同级分支，无法直接通过子元素选择器关联，必须借助共同的父元素<table>来传递悬停状态。
3. 显示属性错误：表格行<tr>的默认显示属性是table-row，用block会破坏表格布局，导致显示异常。

正确实现代码 #

/* 默认隐藏tbody里的最后一行 */
tbody tr:last-child {
  display: none;
}

/* 鼠标悬停表头tr时，显示最后一行 */
thead tr:hover ~ tbody tr:last-child {
  display: table-row;
}

/* 可选：鼠标悬停整个表格时也显示最后一行 */
table:hover tbody tr:last-child {
  display: table-row;
}

说明：

• 使用table-row作为显示属性，保证表格行的布局符合表格规则。
• thead tr:hover ~ tbody tr:last-child 通过同级选择器~关联表头<tr>和<tbody>里的最后一行，当表头行被悬停时触发显示。

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