斑马纹必须作用于tr元素，写为tr:nth-child(odd)；td:nth-child(odd)产生竖条纹而非行交替；含thead时需用tbody tr:nth-child(odd)或nth-of-type(odd)避免序号错乱。
直接用 这是最常踩的坑：误以为给单元格加伪类就能实现行交替。实际上 真正容易被忽略的是 :nth-child(odd) 会给所有奇数行加样式，但表格里真正要高亮的是 <tr>，不是 <code><td> 或 <code><th> —— 所以必须写在 <code>tr 上，否则无效。
为什么
td:nth-child(odd) 不是斑马纹？td:nth-child(odd) 选中的是每行中第 1、3、5… 列的单元格，结果是“竖条纹”，不是“横条纹”。斑马纹本质是按行交替，必须作用于 tr 元素本身。tr:nth-child(odd) → 正确：选中第 1、3、5… 行（即奇数序号的 <tr>）
<li>
<code>td:nth-child(odd) → 错误：选中每行里第 1、3、5… 列的 <td>
<li>如果表格有 <code><thead>，<code>tr:nth-child(odd) 会把表头也计入序号（第 1 行是 <th>），可能导致第一行数据被跳过
<h3>如何避开 <code><thead> 干扰？
<p>当表格含表头时，<code>tr:nth-child(odd) 从整个 <table> 的子元素序列计数，<code><thead><tr></tr></thead> 算作第 1 个 tr，后面的数据行就从第 2 个开始编号，导致偶数行变“奇数”被选中，视觉错乱。
<tbody> 显式包裹数据行，再写 <code>tbody tr:nth-child(odd)
tbody tr:nth-of-type(odd)（更健壮，只计 tr 类型，忽略 thead 中的 tr）:nth-child(odd) 在无 tbody 的表格里“自动对齐”，浏览器解析差异可能引发不一致兼容性与性能注意点
:nth-child() 在 IE9+ 完全支持，但 IE8 及更早版本不支持 —— 如果还需兼容 IE8，得用 JS 动态加 class 或服务端渲染 class。
:nth-child() 是 CSS 引擎原生处理，比 JS 遍历 tr 快得多:nth-of-type() 混用：前者按 DOM 位置序号，后者按同类型兄弟节点序号；对纯 tr 子元素二者效果相同，但一旦中间插入注释、空格文本节点，:nth-child() 就会失效，:nth-of-type() 更鲁棒<thead> 和 <code><tbody> 的结构语义 —— 很多人直接写 <code><table>
<tr><th>...</th></tr>
<tr><td>...</td></tr>
</table>，没包 <tbody>，这时候 <code>:nth-child(odd) 行为就取决于浏览器是否自动补全、怎么补全，结果不可控。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
