如何实现表格隔行变色：排除noColor类行且不参与2n计数

问题分析 #

你遇到的核心问题是：CSS的nth-child()选择器是基于父元素下所有子元素的绝对位置计数的，哪怕用:not(.noColor)过滤，也只是在计数完成后再筛选元素，无法跳过带noColor类的行重新计数。所以之前的写法只能阻止noColor行变色，但后面的正常行还是会按原始位置的奇偶性变色，不符合需求。

解决方案 #

方案1：JavaScript实现（最可靠）

通过JS遍历表格行，跳过noColor类的行，仅对有效行进行计数，给偶数行添加样式：

// 获取目标表格
const targetTable = document.querySelector('table');
// 获取所有行
const tableRows = targetTable.querySelectorAll('tr');
// 初始化有效行计数器
let validRowCount = 0;

tableRows.forEach(row => {
  // 跳过带noColor类的行
  if (row.classList.contains('noColor')) return;
  
  validRowCount++;
  // 给偶数有效行设置背景色（或添加类）
  if (validRowCount % 2 === 0) {
    // 方式1：直接设置样式
    row.querySelectorAll('td').forEach(td => {
      td.style.backgroundColor = 'rgba(219, 219, 219, 0.75)';
    });
    // 方式2：添加CSS类（更推荐，符合样式分离原则）
    // row.classList.add('even-valid-row');
  }
});

如果用添加类的方式，对应的CSS：

.even-valid-row td {
  background-color: rgba(219, 219, 219, 0.75);
}

方案2：纯CSS替代方案（仅适用于简单场景）

纯CSS无法直接跳过元素重新计数，但可以通过复杂的兄弟选择器模拟，不过这种方式扩展性差，仅适合固定数量noColor行的场景，不推荐用于动态内容：

/* 初始所有有效行默认白色 */
table tr:not(.noColor) td {
  background-color: #fff;
}

/* 第2个有效行变色 */
table tr:not(.noColor) + tr:not(.noColor) td {
  background-color: rgba(219, 219, 219, 0.75);
}

/* 跳过3个noColor行后，第4个有效行变色 */
table tr:not(.noColor) + tr:not(.noColor) + tr.noColor + tr.noColor + tr.noColor + tr:not(.noColor) + tr:not(.noColor) td {
  background-color: rgba(219, 219, 219, 0.75);
}

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