:nth-child(odd)和:nth-child(even)是最直接的奇偶行变色写法，但必须作用于同级连续子元素，若父容器中存在thead、注释等干扰节点会导致序号错位，推荐限定tbody作用域或改用:nth-of-type。
nth-child(odd) 和 nth-child(even) 是最直接的写法
想让表格或列表的奇数行（第1、3、5…行）和偶数行（第2、4、6…行）分别变色，:nth-child(odd) 和 :nth-child(even) 就是标准解法。它们不依赖类名或 JS，纯 CSS 即可生效，且语义清晰。
注意：这两个伪类匹配的是父元素下的第 n 个子元素，**必须是同级兄弟元素中的位置序号**，不是“该元素在同类中的第几个”。比如 <tr> 在 <tbody> 下按顺序编号，但若中间穿插了 <th> 或其他标签，序号会包含它们——这是最容易出错的地方。
-
tr:nth-child(odd)→ 所有位于第 1、3、5…个位置的<tr>（不管是不是数据行） - 如果
<tbody>里混有<tr class="header">，它也会被计入序号，导致后续<tr>的奇偶性偏移 - 更稳妥的做法是确保目标元素是连续、同类型子节点，或改用
:nth-of-type()
为什么有时奇偶变色失效？检查 DOM 结构是否“干净”
常见失效场景是 HTML 中存在干扰节点：注释、空格文本节点（虽然现代浏览器大多忽略）、<div>、<span> 或其它非目标标签混在目标元素之间。例如：
<ul> <li>Item 1</li> <!-- 这个注释会被某些解析器视为一个节点 --> <li>Item 2</li> </ul>
这时 li:nth-child(2) 可能无法命中 “Item 2”，因为注释占用了第 2 个位置。
立即学习“前端免费学习笔记（深入）”；
- 用浏览器开发者工具的 Elements 面板查看实际子节点结构，确认目标元素是否真的处于预期序号
- 避免在目标容器内插入无意义的注释或换行符（尤其 SSR 或模板引擎生成时）
- 若结构不可控，优先考虑
:nth-of-type()—— 它只统计同类型标签，对注释/文本/其他标签免疫
:nth-of-type() 更鲁棒，但要注意标签名必须严格一致
当父容器中存在混合节点时，:nth-of-type(odd) 是更可靠的选择。它只统计指定标签名的兄弟元素，跳过所有其他类型节点。
例如：tr:nth-of-type(odd) 只数 <tr> 标签，不管中间有没有 <thead>、<th> 或注释。
- 适用于
<table>中<tr>分散在<thead>/<tbody>内的场景 - 要求标签名完全匹配：
TR和tr在 HTML 中等价，但大小写敏感的 XML/XHTML 环境下需注意 - 不能用于自定义元素（如
<my-row>）除非明确声明为 HTML 元素或使用:is()配合
性能与兼容性：IE8 不支持，但现代项目基本无压力
:nth-child() 和 :nth-of-type() 均不被 IE8 及更早版本支持。如果你的项目仍需兼容 IE8，就得回退到 JS 动态加 class 或服务端渲染 class。
- CSS Level 3 规范特性，Chrome 2+、Firefox 3.5+、Safari 3.1+、Edge 12+ 全支持
- 性能上无明显差异，浏览器对这两种伪类的优化已很成熟，无需担心渲染卡顿
- 真正影响体验的是结构误判——比起兼容性，多数问题出在没看清 DOM 实际层级
真正在意奇偶变色效果时，别只盯着语法对不对，先打开 Elements 面板数一数节点顺序。有时候颜色没变，不是 CSS 写错了，是那个看不见的 <!-- comment -->偷偷占了个位置。
