用 :nth-child(even) 不生效的根本原因是它按 DOM 物理位置计数，遇 <thead>、注释或文本节点即错乱；应改用 tbody tr:nth-of-type(even) 确保只统计 <tr> 标签。
表格奇偶行变色为什么用 :nth-child(even) 不生效？
常见现象是加了样式但所有行颜色一样，或只有第一列变色。根本原因在于 :nth-child() 是按 DOM 树中的**物理位置**计数，不是按 <tr> 的逻辑顺序——只要某行前面有 <thead>、<tbody>、<tfoot> 或其他非 <tr> 元素（比如注释、空格文本节点），计数就乱了。
实操建议：
- 确认目标
<tr>是否直接子元素：检查父容器是不是<tbody>，且里面没有混入<div>、注释或换行符导致的文本节点 - 优先选
<tbody>作为选择器起点，例如tbody tr:nth-child(odd)，比table tr:nth-child(odd)更可靠 - 如果用了
<thead>，:nth-child(odd)会把表头那行也算作第 1 行，导致第一行数据变成“偶数行”——此时应改用:nth-of-type()
:nth-of-type(odd) 和 :nth-child(odd) 到底该用哪个？
:nth-of-type() 只统计同类型标签（即 <tr>），自动跳过 <thead>、<tfoot>、注释等干扰项；:nth-child() 统计所有兄弟节点，更“严格”但也更脆弱。
使用场景判断：
立即学习“前端免费学习笔记（深入）”；
- 纯
<table><tr><td>结构（无<thead>）→ 两者效果一致，任选 - 含
<thead>或动态插入<tr>→ 必须用tbody tr:nth-of-type(odd)，否则表头后第一行永远是even - 需要兼容 IE8 及更早版本 → 两个都不可用，得靠 JS 或 class 手动标记（如
class="odd"）
用 CSS 实现隔行变色的最小可靠写法
不依赖 HTML 结构假设，也不引入 JS，最稳妥的组合就是限定作用域 + 类型筛选。
示例（直接可用）：
tbody tr:nth-of-type(odd) {
background-color: #f9f9f9;
}
tbody tr:nth-of-type(even) {
background-color: #ffffff;
}
关键点：
- 必须写
tbody前缀，避免匹配到<thead><tr> - 用
nth-of-type而非nth-child，绕过 DOM 中隐藏节点干扰 - 不要只设
odd，同时定义even，防止其他样式（如 hover）意外覆盖背景 - 若表格有合并单元格（
rowspan），不影响计数逻辑，但视觉上可能错位——这是语义问题，不是 CSS 错误
JavaScript 动态增删行时，CSS 隔行色会失效吗？
不会失效，但有个前提：新插入的 <tr> 必须 append 到 <tbody>，且插入位置不能破坏原有顺序（比如插在中间）。浏览器会实时重算 :nth-of-type()，所以只要结构合法，样式自动生效。
容易踩的坑：
- 用
innerHTML += '<tr>...</tr>'→ 可能触发整个<tbody>重建，导致所有tr重新排序，视觉闪烁甚至错色 - 插入前没清空旧样式类（如果之前用 JS 加过
class="odd"）→ 新旧逻辑冲突 - 用
document.createElement('tr')但忘了appendChild()到<tbody>→ 节点不在文档流中，:nth-of-type根本不匹配
复杂点其实在表格嵌套或服务端渲染时的 SSR/CSR 一致性——DOM 生成时机不同，可能导致首屏闪动。这时候就得配合 data-loaded 属性做渐进增强，而不是指望纯 CSS 一劳永逸。
