:nth-child(2n)有时不生效是因为它按父元素所有子元素计数，而非仅；正确写法是tbody tr:nth-child(2n)，且需确保结构规范、避免干扰节点。
直接用 常见原因是表格结构里混入了非 是的，它们语义清晰、兼容性略好（IE9+），且不受前面非 立即学习“前端免费学习笔记（深入）”； 真正容易被忽略的是 HTML 结构隐含的层级关系——:nth-child(2n) 或 :nth-child(odd) 就能实现，但必须确保目标 <tr> 是其父容器（如 <code><tbody>）的直系子元素，否则选中会失效。
<h3>为什么 <code>:nth-child(2n) 有时不生效？
<tr> 元素，比如 <code><thead>、<code><tbody>、<code><tfoot> 或注释/空格文本节点。此时 <code>:nth-child 按所有子元素顺序计数，而非仅 <tr>。
<ul><li>✅ 正确写法：给 <code><tbody> 下的 <code><tr> 单独加样式，例如 <code>tbody tr:nth-child(2n)
table tr:nth-child(2n) —— 如果 <thead> 有 1 行，那第 1 个 <code><tr> 实际是第 2 个子元素，不会被 <code>2n 匹配到
:nth-child()，需用 JS 或服务端生成 class
:nth-child(odd) 和 :nth-child(even) 更稳妥吗？<tr> 元素干扰——只要明确作用在 <code><tbody> 内部即可。
<ul>
<li>给奇数行（第 1、3、5… 行）设背景：<code>tbody tr:nth-child(odd) { background: #f9f9f9; }
tbody tr:nth-child(even) { background: #eef2f7; }
<tbody>，浏览器会自动补上，但显式写出更可靠，也方便 CSS 选择器定位
<h3>想从第 2 行开始隔行变色？用公式表达式</h3>
<p>比如希望第 2、4、6… 行高亮，但第一行是表头（<code><th>），这时不能只靠 <code>even，得用 2n+2 这类公式。tbody tr:nth-child(2n+2) → 匹配第 2、4、6… 个 <tr>（即视觉上的第 1、2、3… 条数据行）
<li>
<code>tbody tr:nth-child(2n+1) → 若表头在 <thead> 里，这个会匹配 <code><tbody> 中第 1、3、5… 行
<li>公式 <code>an+b 中的 a 控制周期，b 控制起始偏移；负值如 2n-1 在某些旧版 Safari 有解析问题，尽量避免:nth-child 数的是“第几个子”，不是“第几个 <tr>”。哪怕只是多了一行 <code><caption></caption> 或一个空格换行，都可能让样式错位。动手前先用浏览器开发者工具检查目标 <tr> 的实际子元素序号。</tr>
