:nth-child(even)和:nth-child(odd)是标准写法，匹配dom位置上的偶数/奇数子元素；:nth-child-even不存在，浏览器会忽略；在table中需注意tbody等包裹层导致计数上下文变化。

nth-child(even) 和 nth-child(odd) 才是标准写法

没有 nth-child-even 这个选择器，这是常见误解。CSS 规范中只有 :nth-child() 伪类，括号内填 even 或 odd 表示偶数位或奇数位元素（注意：是“位置”，不是“行号”）。

典型错误是直接写 nth-child-even，浏览器会完全忽略该规则，背景色不会生效。

• :nth-child(even) 匹配第 2、4、6… 个子元素（按 DOM 树顺序，从父容器第一个子元素开始计数）
• :nth-child(odd) 匹配第 1、3、5… 个子元素
• 它不关心元素类型——哪怕中间夹着 <div> 或注释，计数也不会跳过 <h3>表格中用 :nth-child(even) 可能失效的真相</h3> <p>在 <code><table> 中直接对 <code>tr 写 tr:nth-child(even) 很容易出问题，因为 <thead>、<code><tbody>、<code><tfoot> 是包裹层，实际 <code>tr 的父元素是这些 tbody 等，而不是 table 本身。

  所以 tr:nth-child(even) 实际匹配的是每个 <tbody> 内部的第 2、4… 个 <code>tr，而非整张表的第 2、4 行。

  • 正确做法：给 <tbody> 加 class（如 <code>class="data-body"），再写 .data-body tr:nth-child(even)
  • 更稳妥方案：用 :nth-of-type()（但仅当 tr 是其父元素下唯一一类标签时才可靠）
  • 若需跨 thead/tbody 统一编号，只能靠 JS 动态加 class，CSS 无解

  替代方案：:nth-of-type() 更贴近“视觉行”直觉

  当父容器里混有其他标签（如 <div>、<code><p></p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="overflowclass">CSS婚礼策划服务机构宣传网站模板</a> <p class="overflowclass">CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a rel="nofollow" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div>），:nth-child() 的“位置计数”会偏移，而 :nth-of-type() 只统计同类型元素（比如只数所有 tr），有时更符合预期。

  例如：

  <tbody>
  <tr><td>A</td></tr>
  <div>note</div>
    <tr><td>B</td></tr>
  <tr><td>C</td></tr>
  </tbody>

  • tr:nth-child(even) → 不匹配任何 tr（因为第 2 个子元素是 <div>） <li> <code>tr:nth-of-type(even) → 匹配第 2 个 tr（即 “C” 所在行）
  • 但注意：:nth-of-type() 不支持公式如 2n+1，只能用 odd/even 或具体数字

  兼容性与性能提醒

  :nth-child() 在 IE9+ 完全支持，IE8 及以下不支持——如果还需兼容 IE8，必须用 JS 添加 class="even"/"odd"。

  性能上，现代浏览器优化良好，但嵌套过深（如 div div div tr:nth-child(even)）或配合复杂属性选择器时，仍可能触发重排/重绘。

  • 避免写成 tbody tr:nth-child(even) td，应写为 tbody tr:nth-child(even) 并设置 background-color 到 tr 上（更高效）
  • 不要在动画关键帧里频繁切换 :nth-child 相关样式，它不触发硬件加速
  • 若表格数据量极大（>1000 行），CSS 隔行变色本身没问题，但滚动卡顿大概率来自其他因素（如未使用 will-change: transform 或虚拟滚动缺失）
  真正起作用的是计数逻辑和父级上下文，不是关键词长得像不像“even”。很多人调了半天发现没效果，最后发现只是少写了冒号，或者 tbody 没包住 tr。