CSS选中groupheader后首个非隐藏tr问题：:first-of-type失效求助

你的CSS写法无效，核心原因是**:first-of-type伪类是基于父元素下的同类型元素，而非前面选择器筛选后的子集**。也就是说，tr.groupheader ~ tr:not(.hidden):first-of-type会试图找<tbody>里第一个<tr>（所有子元素都是<tr>，所以就是第一个<tr>），同时满足它在.groupheader之后且不隐藏——这显然不是你要的“每个.groupheader后的第一个非隐藏行”。

纯CSS解决方案 #

可以用“先统一设置，再覆盖后续元素”的思路实现需求：

/* 给所有.groupheader之后的非隐藏行添加样式 */
tr.groupheader ~ tr:not(.hidden) {
  margin-top: 15px; /* 与组头的间距 */
  border-top: 2px solid #eee; /* 分隔线 */
}

/* 给.groupheader之后、前面已有非隐藏行的元素，取消样式 */
tr.groupheader ~ tr:not(.hidden) ~ tr:not(.hidden) {
  margin-top: 0;
  border-top: none;
}

原理是：

• 第一行规则会选中所有.groupheader之后的非隐藏<tr>，给它们加上样式；
• 第二行规则会选中那些前面已经有其他非隐藏<tr>的目标元素，把样式覆盖掉——最终只有每个.groupheader后的第一个非隐藏行会保留样式。

为什么原写法不生效 #

:first-of-type的作用范围是父元素的所有同类型子元素，无法对~选择器筛选出的“后续兄弟子集”做“取第一个”的操作。CSS目前没有原生的“筛选后取第一个”的伪类（类似:first-match的提案尚未落地），所以你的原写法逻辑上不成立。

如果上述CSS方案因复杂场景受限，再考虑用脚本遍历.groupheader元素，逐个找到其后续第一个非隐藏<tr>并添加样式即可。

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