如何为表格中.row类元素应用:nth-child(even)实现斑马纹？

问题说明 #

你的表格tbody里同时存在普通数据行（.row类）和扩展行（.row--expanded/.row--expandable类），之前用tr:nth-child(even)实现的斑马纹，会因为扩展行的插入打乱奇偶计数；而.row:nth-child(even)也无效，因为:nth-child是按父元素下所有子元素的位置来计数，不是只统计匹配.row的元素。

可行解决方案 #

1. 用CSS Selectors Level 4的精准选择（推荐） #

这是最简洁的现代方案，直接指定只对.row类的元素进行奇偶计数：

tbody tr:nth-child(even of .row) {
  background-color: #f5f5f5; /* 替换成你的斑马纹颜色 */
}

这个选择器会先从tbody的所有tr中筛选出带.row类的元素，再对这些元素单独计算奇偶位置，完全无视扩展行的存在。目前主流浏览器（Chrome、Firefox、Edge 79+）都支持这个语法。

2. 旧浏览器兼容方案（纯CSS） #

如果要兼容不支持Level 4选择器的旧浏览器，可以用相邻兄弟选择器来模拟：

/* 基础行样式 */
tbody .row {
  background-color: #fff;
}

/* 给交替的.row添加斑马纹 */
tbody .row + .row,
tbody .row + :not(.row) + .row {
  background-color: #f5f5f5;
}

逻辑是：要么是两个.row直接相邻，要么是.row后面跟着非.row的扩展行，再后面的.row就需要着色，以此实现交替效果。

3. JavaScript动态添加类（最灵活） #

如果表格是动态渲染或频繁更新的，用JS来控制更可靠：

// 给所有.row按奇偶添加斑马纹类
document.querySelectorAll('tbody .row').forEach((row, idx) => {
  if (idx % 2 === 1) { // 索引从0开始，第2、4...行对应idx为奇数
    row.classList.add('zebra-row');
  }
});

然后在CSS中定义样式：

.zebra-row {
  background-color: #f5f5f5;
}

注意：如果有行的展开/收起操作，需要在操作完成后重新执行这段JS，保证斑马纹正确。

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