:nth-child(2n)有时不生效是因为按父元素所有子元素物理序号计数，thead、caption等干扰导致tbody内tr序号错位；应限定为tbody tr:nth-child(2n)确保准确匹配。
为什么 :nth-child(2n) 有时不生效？
表格里用 :nth-child 实现斑马纹，最常踩的坑是没分清「元素层级」和「实际子元素顺序」。比如 <tr> 在 <code><table> 下，如果中间插了 <code><thead> 或 <code><tbody>，<code>:nth-child 就会从该容器的第一个子元素开始数，而不是所有 <tr>。<ul><li><code><tr> 直接放在 <code><table> 下（无 <code><tbody>）时，<code>tr:nth-child(odd) 才能正确选中奇数行
<tr> 放进 <code><tbody>，然后对 <code>tbody tr:nth-child(odd) 写样式 <thead>，它里面的 <code><tr> 也会被算进 <code>:nth-child 计数，导致后续 <tbody> 的行号偏移 <h3>怎么写才能兼容所有主流浏览器？</h3>
<p><code>:nth-child 本身支持 IE9+，但旧版 Safari（≤6.1）和 Android Browser（≤4.3）对伪类解析有偏差，尤其在嵌套表格或动态插入行时。
- 优先用
tbody tr:nth-child(odd)而非tr:nth-child(odd)，减少父容器干扰 - 避免写成
tr:nth-child(2n+1)，虽然语义等价，但部分老 WebView 解析不稳定，直接用odd/even更可靠 - 不要依赖 JavaScript 动态加 class 来模拟斑马纹——除非你明确需要支持 IE8，否则纯 CSS 更轻量、更易维护
如何让表头和斑马纹互不干扰？
表头 <th> 通常需要独立样式，但若只给 <code>tr:nth-child(odd) 加背景色，<thead> 里的 <code><tr> 也会被染色。<ul>
<li>给表头单独重置： <pre class="brush:php;toolbar:false;">thead tr {
background-color: #f8f9fa;
}</pre>
</li>
<li>或者更精准地排除： <pre class="brush:php;toolbar:false;">tbody tr:nth-child(odd) {
background-color: #f8f9fa;
}</pre>
</li>
<li>注意：不要用 <code>tr:not(thead tr):nth-child(odd) —— 这种组合选择器在部分浏览器中不被支持，且可读性差
遇到合并单元格（rowspan）怎么办？
:nth-child 完全不感知 rowspan 或 colspan，它只按 DOM 顺序数标签。所以即使某行跨了两行显示，它在 :nth-child 里仍只算一个节点。
- 斑马纹样式照常应用，视觉上可能看起来“断层”，这是正常行为
- 如果业务上真要求视觉连续（比如跨行数据必须和上下文同色），就得放弃
:nth-child，改用 JS 标记序号或预设 class（如row-1、row-2） - 没必要为这种边缘情况强行 hack 伪类，CSS 本就不是为逻辑运算设计的
真正容易被忽略的是：表格结构是否规范。很多“斑马纹失效”问题，根源不在 :nth-child 语法，而在 HTML 没闭合 <tbody>、漏写 <code><tr>、或者服务端模板拼错了标签层级。先校验 DOM 结构，再调样式。</tr>
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
