表格CSS高亮与Hover效果异常问题求助

可以仅靠CSS实现需求，无需JavaScript，但需要调整HTML结构——给同一服务器对应的所有<tr>添加相同的自定义属性（如data-server），且保证这些行连续排列。以下是具体实现方案：

步骤1：调整HTML结构 #

给每个服务器对应的所有行添加data-server属性，值为服务器标识（如server-x），确保同一服务器的<tr>连续排列：

<table>
  <thead>
    <tr>
      <th>服务器</th>
      <th>账户</th>
      <th>状态</th>
    </tr>
  </thead>
  <tbody>
    <!-- ServerA -->
    <tr data-server="server-a">
      <td>ServerA</td>
      <td>Acct A1</td>
      <td>在线</td>
    </tr>
    <!-- ServerR -->
    <tr data-server="server-r">
      <td>ServerR</td>
      <td>Acct R1</td>
      <td>在线</td>
    </tr>
    <!-- ServerX -->
    <tr data-server="server-x">
      <td rowspan="2">ServerX</td>
      <td>Acct X1</td>
      <td>在线</td>
    </tr>
    <tr data-server="server-x">
      <td>Acct X2</td>
      <td>在线</td>
    </tr>
    <!-- ServerB -->
    <tr data-server="server-b">
      <td>ServerB</td>
      <td>Acct B1</td>
      <td>离线</td>
    </tr>
    <!-- ServerC -->
    <tr data-server="server-c">
      <td rowspan="3">ServerC</td>
      <td>Acct C1</td>
      <td>在线</td>
    </tr>
    <tr data-server="server-c">
      <td>Acct C2</td>
      <td>在线</td>
    </tr>
    <tr data-server="server-c">
      <td>Acct C3</td>
      <td>在线</td>
    </tr>
  </tbody>
</table>

步骤2：编写CSS样式 #

基础表格样式 #

table {
  border-collapse: collapse;
  width: 100%;
  margin: 1rem 0;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f0f0f0;
}

奇偶行交替背景 #

利用CSS相对选择器，按服务器组的奇偶位置设置背景，解决跨行导致的背景异常：

/* 所有服务器组的奇偶行交替 */
tbody tr[data-server]:nth-child(odd of tbody tr[data-server]) {
  background-color: #f8f9fa;
}
tbody tr[data-server]:nth-child(even of tbody tr[data-server]) {
  background-color: #ffffff;
}

/* ServerB 无背景 */
tbody tr[data-server="server-b"] {
  background-color: transparent;
}

/* ServerC 统一背景 */
tbody tr[data-server="server-c"] {
  background-color: #e3f2fd;
}

鼠标悬停高亮同一服务器所有行 #

使用CSS :has()选择器（主流浏览器均支持），实现悬停任意一行时，同一服务器的所有行同步高亮：

tbody tr[data-server]:hover,
tbody:has(tr[data-server]:hover) tr[data-server=''] {
  background-color: #fff3cd;
}

关键说明 #

1. :nth-child(odd of tbody tr[data-server]) 会选择tbody下所有带data-server属性的<tr>中的奇数位置元素，确保每个服务器行组作为整体参与奇偶交替。
2. :has()选择器实现了跨多行的悬停联动，只要同一服务器的<tr>连续排列，就能触发所有关联行的高亮。
3. 若需兼容不支持:has()的旧版浏览器，可针对固定行数的服务器用相邻兄弟选择器（如tr[data-server]:hover + tr[data-server]），但行数不固定时建议补充少量JS，不过现代浏览器已无需考虑。

内容的提问来源于stack exchange，提问作者J. DuBois