: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> 在 <code><tbody> 下按顺序编号，但若中间穿插了 <code><th> 或其他标签，序号会包含它们——这是最容易出错的地方。<ul><li>
<code>tr:nth-child(odd) → 所有位于第 1、3、5…个位置的 <tr>（不管是不是数据行）<li>如果 <code><tbody> 里混有 <code><tr class="header">，它也会被计入序号，导致后续 <code><tr> 的奇偶性偏移<li>更稳妥的做法是确保目标元素是连续、同类型子节点，或改用 <code>:nth-of-type()
为什么有时奇偶变色失效？检查 DOM 结构是否“干净”
常见失效场景是 HTML 中存在干扰节点：注释、空格文本节点（虽然现代浏览器大多忽略）、<div>、<code><span></span> 或其它非目标标签混在目标元素之间。例如：
- Item 1
- Item 2
这时 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> 标签，不管中间有没有 <code><thead>、<code><th> 或注释。<ul><li>适用于 <code><table> 中 <code><tr> 分散在 <code><thead>/<code><tbody> 内的场景<li>要求标签名完全匹配：<code>TR 和 tr 在 HTML 中等价，但大小写敏感的 XML/XHTML 环境下需注意
<my-row></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 -->偷偷占了个位置。
