使用:has选择器实现含rowspan的嵌套表格行高亮的CSS优化问询

核心思路 #

放弃预定义rowspan选择器的冗余方案，改用CSS变量 + :has()选择器 + 动态行数计算，完全适配任意rowspan值、多层嵌套及多的复杂场景，且CSS代码量极小。

实现步骤 #

1. 表格结构预处理

动态生成表格时，给所有带rowspan属性的<th>绑定CSS变量--rowspan，值与rowspan属性一致。可通过JS批量处理：

document.querySelectorAll('th[rowspan]').forEach(th => {
  th.style.setProperty('--rowspan', th.getAttribute('rowspan'));
});

如果是后端渲染表格，也可直接在<th>上写内联样式：

<th rowspan="3" style="--rowspan: 3">父节点</th>

2. 纯CSS高亮逻辑

/* 基础表格样式 */
table {
  border-collapse: collapse;
  width: 100%;
  font-family: system-ui, sans-serif;
}
th, td {
  border: 1px solid #e5e7eb;
  padding: 0.75rem;
}

/* 普通行悬停高亮 */
tr:hover:not(:has(th[rowspan])) {
  background-color: #f3f4f6;
}

/* 跨行<th>悬停时，高亮当前行及对应行数的后续行 */
tr:has(th[rowspan]:hover),
tr:has(th[rowspan]:hover) ~ tr:nth-child(-n + calc(var(--rowspan) - 1)) {
  background-color: #f3f4f6;
}

/* 可选：多层嵌套<th>区分高亮 */
/* 给不同层级的<th>加类，比如.level-1、.level-2，实现差异化高亮 */
tr:has(th.level-2:hover),
tr:has(th.level-2:hover) ~ tr:nth-child(-n + calc(var(--rowspan) - 1)) {
  background-color: #e5e7eb;
}

方案优势 #

• 完全动态适配：无需预定义任何rowspan数值，不管表格是静态还是动态生成，都能自动适配任意跨行数量
• 代码极简：CSS代码仅几十行，无冗余内容，体积远小于1KB
• 支持复杂场景：完美处理同一行多、多层嵌套树形结构的高亮需求
• 现代浏览器兼容：支持Chrome 112+、Firefox 121+、Safari 15.4+，覆盖绝大多数现代环境

关键技术点说明 #

• :has()选择器：监听的悬停状态，精准定位需要高亮的行组
• CSS变量--rowspan：动态传递跨行数量，避免硬编码数值
• calc(var(--rowspan) - 1)：计算需要高亮的后续行数（当前行已算一行，后续只需选中rowspan-1行）
• :nth-child(-n + X)：选中当前行之后的前X行，实现跨行高亮

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