最稳妥写法是tbody tr:nth-child(odd)和tbody tr:nth-child(even)，可精准匹配数据行、避开thead/tfoot干扰；:nth-of-type()因受注释等文本节点影响而计数不稳定；动态插入需确保tr添加到tbody内，ie8以下须用js遍历设样式。
tr:nth-child(odd) 和 tr:nth-child(even) 是最直接、最可靠的方式，不需要 JS，现代浏览器全支持。
为什么优先用 :nth-child() 而不是 :nth-of-type()
表格里 tr 通常只出现在 thead 或 tbody 内，但 thead 里的 tr 也会被 tr:nth-child(odd) 计入——这会导致表头行也被染色，破坏视觉结构。
- 正确做法是限定作用域：
tbody tr:nth-child(odd)和tbody tr:nth-child(even) -
:nth-of-type()看的是同类型标签的顺序，但表格中tr前后可能有注释、空格文本节点，导致计数错乱，实测不稳定 - 别写
tr:nth-child(2n+1)这种等价写法——语义不如odd清晰，且没任何兼容性优势
遇到动态插入行时背景色不更新怎么办
CSS 规则本身是实时生效的，只要新 tr 插入到 tbody 中，就会自动匹配 :nth-child()。但如果插入逻辑绕过了 tbody（比如直接 append 到 table），或者用了 innerHTML 批量重写整个 tbody，就可能因 DOM 重建丢失状态或触发重排异常。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 确保新行只插入到
tbody内，例如：document.querySelector('tbody').appendChild(newTr) - 避免用
table.innerHTML += '...'，改用tbody.insertAdjacentHTML('beforeend', '...') - 如果必须重写
tbody，插入后无需手动补样式——CSS 会立刻重新计算
IE8 及更老浏览器不支持怎么办
IE8 不支持 :nth-child()，但仍在部分内网系统中存在。此时不能靠 CSS fallback，必须用 JS 补位。
- 检测环境：
!window.getComputedStyle || !getComputedStyle(document.documentElement).getPropertyValue('content').match(/nth/)（粗略判断） - 简单遍历：
Array.from(tbody.querySelectorAll('tr')).forEach((tr, i) => { tr.style.backgroundColor = i % 2 === 0 ? '#f9f9f9' : '#fff'; }) - 注意：不要给
tr直接设style.background后又想用 CSS 覆盖——内联样式优先级高于外部 CSS，得用removeAttribute('style')或改用 class 控制
真正容易被忽略的点是：表头 thead tr 和表体 tbody tr 必须分开处理；动态插入时 DOM 位置比“有没有加 class”更重要；而所谓“兼容 IE8”的方案，本质是放弃 CSS 隔行逻辑，换一套 JS 维护的索引映射——它和现代方案不在同一抽象层，混用必出问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
