本文详解如何使用现代 CSS :nth-child(2n of ) 语法，对不含指定类（如 .noColor）的表格行进行逻辑上连续的隔行着色，确保被排除的行既不染色、也不参与奇偶计数。

本文详解如何使用现代 css :nth-child(2n of <selector>)</selector> 语法，对不含指定类（如 .nocolor）的表格行进行逻辑上连续的隔行着色，确保被排除的行既不染色、也不参与奇偶计数。

在 Web 开发中，为表格实现隔行变色（zebra striping）是提升可读性的常用实践。但当部分行需被视觉或逻辑排除（例如标记为 <tr class="noColor"> 的汇总行、空行或禁用行）时，传统 <code>:nth-child(2n) 或 :nth-of-type(2n) 就会失效——它们仅按 DOM 位置计数，无法“跳过”特定元素。

你遇到的问题正是典型场景：

• 希望第 1、3、5… 个有效行（即非 .noColor 行）为默认色；
• 第 2、4、6… 个有效行应用背景色；
• 而 .noColor 行必须完全忽略（不着色 + 不计入序列）。

✅ 正确解法：使用 CSS Selectors Level 4 引入的 :nth-child(An+B of <selector>)</selector> 语法：

table tr:nth-child(2n of tr:not(.noColor)) td {
  background-color: rgba(219, 219, 219, 0.75);
}

该选择器含义是：

“在所有满足 tr:not(.noColor) 条件的 <tr> 元素中，选取第 2、4、6… 个（即偶数序位）元素，并对其 <code><td> 应用样式”。<p>? 对比验证（基于你提供的 HTML）：</p><pre class="brush:php;toolbar:false;">&lt;table&gt; &lt;tr&gt;&lt;td&gt;whatever&lt;/td&gt;&lt;/tr&gt; &lt;!-- 有效行 #1 → 不着色 --&gt; &lt;tr&gt;&lt;td&gt;whatever&lt;/td&gt;&lt;/tr&gt; &lt;!-- 有效行 #2 → 着色 ✅ --&gt; &lt;tr class=&quot;noColor&quot;&gt;&lt;td&gt;whatever&lt;/td&gt;&lt;/tr&gt; &lt;!-- 跳过，不计数 --&gt; &lt;tr class=&quot;noColor&quot;&gt;&lt;td&gt;whatever&lt;/td&gt;&lt;/tr&gt; &lt;!-- 跳过，不计数 --&gt; &lt;tr class=&quot;noColor&quot;&gt;&lt;td&gt;whatever&lt;/td&gt;&lt;/tr&gt; &lt;!-- 跳过，不计数 --&gt; &lt;tr&gt;&lt;td&gt;whatever&lt;/td&gt;&lt;/tr&gt; &lt;!-- 有效行 #3 → 不着色 --&gt; &lt;/table&gt;</pre><p>结果完全符合预期：仅第 2 个有效行被着色，后续新加入的有效行将严格按“有效序列”延续奇偶逻辑。</p> <p>⚠️ 注意事项：</p> <ul> <li> <strong>浏览器兼容性</strong>：该语法已获 Chrome 111+、Firefox 115+、Safari 16.4+、Edge 111+ 原生支持（截至 2026 年，主流现代浏览器全覆盖）；若需支持旧版 IE 或早期 Edge，需降级为 JavaScript 动态添加类（如 <code>row-even/row-odd），或使用 :not(.noColor) + :not(.noColor) 等复杂组合（不推荐，可维护性差）。

性能提示：:nth-child(of ...) 是纯 CSS 声明式方案，无运行时开销，优于 JS 遍历。

语义清晰性：相比 :nth-of-type（仅按标签名过滤）或 :not(.noColor):nth-child(2n)（仍按物理位置计数），of 语法明确表达了“在子集内重新编号”的意图，代码自解释性强。

? 进阶技巧：
若还需为“奇数位有效行”着色（如深灰底），可补充：

table tr:nth-child(2n+1 of tr:not(.noColor)) td {
  background-color: #f5f5f5;
}

总结：nth-child(An+B of <selector>)</selector> 是解决“条件隔行变色”问题的标准、优雅且高性能的现代方案。它让 CSS 真正具备了基于逻辑筛选而非物理位置的序列控制能力，是响应式数据表格样式设计的重要进阶技能。