:nth-child(2n)未生效的直接原因是它匹配父元素下第2、4、6…个子元素，而非视觉偶数行；受注释、文本节点、标签嵌套等干扰导致序号错乱。
nth-child(2n) 为什么偶数行没变色
直接原因是 :nth-child(2n) 匹配的是「父元素下第 2、4、6… 个子元素」，不是「表格里视觉上的第 2、4、6 行」。一旦某行里混了 <thead>、<code><tbody>、<code><tr> 外的其他标签（比如注释、空格文本节点、<code><caption></caption>），序号就全乱了。
常见错误现象：tr:nth-child(2n) 在 Chrome 看正常，在 Safari 或有服务端渲染的页面里隔三差五漏掉几行；或者表头 <th> 被一起染色了。<ul><li>确保所有 <code><tr> 都在同一个父容器下（比如统一用 <code><tbody> 包裹数据行，<code><thead> 单独写）<li>避免在 <code><tbody> 内插入注释或换行符——它们算作文本节点，会参与 <code>:nth-child 计数
:nth-of-type(2n)，它只看同类型标签（<tr>），忽略中间的文本或其它标签<h3>用 :nth-of-type(2n) 替代时要注意什么</h3>
<p><code>:nth-of-type 看起来更“靠谱”，但它也有陷阱：它按 HTML 标签名匹配，不区分语义。比如你在 <tbody> 里混用了 <code><tr class="summary"> 和普通 <code><tr>，那 <code>tr:nth-of-type(2n) 依然会把它们一起计数——因为都是 <tr>。<p>使用场景：适合纯数据表格，且所有行都是 <code><tr>，没有嵌套 <code><tr> 的子模板或动态插入的占位行。<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>不能靠加 <code>class 来过滤，:nth-of-type 不认类名<tr class="group-header">），它们也会被计入序号，导致数据行错位<li>想只对特定 class 行做奇偶变色？得配合属性选择器：<code>tr[data-role="data"]:nth-of-type(2n)，前提是能稳定打标React/Vue 渲染后 nth-child 失效怎么办
框架在 DOM 中插入的注释节点（比如 Vue 的 <!--v-if-->、React 的 <!-- react-text: x -->）会被 :nth-child 当成真实子元素计数，这是最常被忽略的兼容性坑。
错误信息示例：tbody tr:nth-child(2n) { background: #f5f5f5; } 在开发环境有效，构建后失效——因为生产模式下 React 可能省略部分注释，但 Vue 默认保留。
- 优先用
:nth-of-type(2n)，它跳过注释和文本节点 - Vue 用户可启用
comments: false（Vue CLI 项目需配vue-loader选项），但会影响调试 - React 用户若用
React.Fragment（>），注意它不生成 DOM 节点，不影响计数；但Fragment里若包裹了条件渲染，仍可能引入注释
性能与可维护性：别在大报表里硬扛 CSS 伪类
当表格行数超过 2000 行，:nth-child 或 :nth-of-type 触发的重排开销并不小，尤其在低配安卓 WebView 或旧版 Electron 中。更麻烦的是，这类样式无法被 JS 动态控制（比如用户切换深色模式时想关掉斑马纹）。
参数差异：CSS 伪类是声明式、静态的；而给每行加 class="row-even" 是命令式、可控的。
- 服务端渲染或 SSR 场景下，直接输出带
class的 HTML，零 JS 开销 - 前端渲染时，用
index % 2 === 0在循环中动态加 class，比依赖 CSS 计数更可靠 - 如果报表支持排序/筛选，DOM 顺序会变，但 class 是跟着数据走的，不会错位
复杂点在于：你得决定谁来管这个 class —— 是组件逻辑、工具函数，还是交给 UI 库的 Table 组件内部处理。很多人卡在这一步，不是不会写，是没想清楚责任边界。
