:nth-child(2n)未生效的直接原因是它匹配父元素下第2、4、6…个子元素，而非视觉偶数行；受注释、文本节点、标签嵌套等干扰导致序号错乱。
nth-child(2n) 为什么偶数行没变色
直接原因是 :nth-child(2n) 匹配的是「父元素下第 2、4、6… 个子元素」，不是「表格里视觉上的第 2、4、6 行」。一旦某行里混了 <thead>、<tbody>、<tr> 外的其他标签（比如注释、空格文本节点、<caption>），序号就全乱了。
常见错误现象：tr:nth-child(2n) 在 Chrome 看正常，在 Safari 或有服务端渲染的页面里隔三差五漏掉几行；或者表头 <th> 被一起染色了。
- 确保所有
<tr>都在同一个父容器下（比如统一用<tbody>包裹数据行，<thead>单独写） - 避免在
<tbody>内插入注释或换行符——它们算作文本节点，会参与:nth-child计数 - 如果必须兼容老数据结构，改用
:nth-of-type(2n)，它只看同类型标签（<tr>），忽略中间的文本或其它标签
用 :nth-of-type(2n) 替代时要注意什么
:nth-of-type 看起来更“靠谱”，但它也有陷阱：它按 HTML 标签名匹配，不区分语义。比如你在 <tbody> 里混用了 <tr class="summary"> 和普通 <tr>，那 tr:nth-of-type(2n) 依然会把它们一起计数——因为都是 <tr>。
使用场景：适合纯数据表格，且所有行都是 <tr>，没有嵌套 <tr> 的子模板或动态插入的占位行。
立即学习“前端免费学习笔记（深入）”；
- 不能靠加
class来过滤，:nth-of-type不认类名 - 如果报表里有分组行（如
<tr class="group-header">），它们也会被计入序号，导致数据行错位 - 想只对特定 class 行做奇偶变色？得配合属性选择器：
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 组件内部处理。很多人卡在这一步，不是不会写，是没想清楚责任边界。
