nth-child(even) 对 <tr> 不起作用是因为浏览器自动补全 <tbody>，<tr> 的父元素实为 <tbody> 而非 <table>；且 <thead> 等会干扰 nth-child 计数，应改用 tbody tr:nth-of-type(even)。
nth-child(even) 为什么对 <tr> 不起作用？
直接给 <tbody> 或 <table> 写 tr:nth-child(even) 常常没效果，根本原因是：浏览器会自动补全缺失的 <tbody>，而 <tr> 的父元素其实是 <tbody>（哪怕你没写），不是 <table>。所以选择器必须定位到真实的父级上下文。
常见错误写法：table tr:nth-child(even) —— 这里 tr 的父级是 <tbody>，不是 <table>，所以不匹配。
- 正确目标：选中
<tbody>下的偶数个<tr> - 更稳妥写法：显式写出
tbody tr:nth-child(even)，避免依赖隐式结构 - 如果表格含
<thead>或<tfoot>，nth-child会把它们一起计数，导致偶数行错位 —— 这是最大坑点
如何让偶数行样式只作用于 <tbody> 数据行？
用 tbody tr:nth-of-type(even) 比 nth-child 更可靠：它只统计同类型标签（即 <tr>），跳过 <thead>、<th> 等干扰节点。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
nth-of-type(even)按标签名计数，不受其他兄弟元素影响 -
nth-child(even)按 DOM 顺序位置计数，<thead><tr>...</tr></thead>占一个位置，会导致后续<tbody>中第一个<tr>是第 2 个子元素，被当成“偶数” - 示例：
tbody tr:nth-of-type(even) { background-color: #f5f5f5; }
兼容性与 CSS 作用域注意事项
nth-of-type 和 nth-child 在 IE9+ 都支持，但 IE8 及以下完全不支持 —— 如果需兼容旧环境，得用 JS 动态加 class 或后端渲染 class。
立即学习“前端免费学习笔记（深入）”；
- 避免写成
tr:nth-child(even) td，这会选中偶数行里所有单元格，但样式继承没问题；真正要警惕的是误写成tr:nth-child(even) > td，多此一举且易出错 - 若表格有合并行（
rowspan），nth-of-type依然按<tr>标签数量计数，不影响逻辑 - 使用 CSS Modules 或 Shadow DOM 时，确保选择器作用域覆盖到
<tbody>内部
有没有更现代、更语义化的替代方案？
CSS :is() 和 :where() 能简化写法，但目前对换色场景提升有限；真正值得考虑的是用 background-image: linear-gradient() 配合 background-attachment: local 实现隔行底纹 —— 不依赖行号，滚动也稳定，但无法单独控制每行颜色。
- 纯 CSS 隔行渐变示例：
tbody { background-image: linear-gradient(rgba(0,0,0,0.03) 50%, transparent 50%); background-size: 100% 2em; } - 该方式绕过
nth-系列限制，但失去对单行精确控制（比如 hover 时想取消某行背景色） - 所以日常开发中，
tbody tr:nth-of-type(even)仍是平衡兼容性、可读性和可控性的首选
<thead> 对 nth-child 计数的影响——哪怕只有一行表头，也会让第一行数据变成 :nth-child(2)，结果首行就被染色。不验证 DOM 结构就写选择器，十有八九翻车。 
