:nth-of-type(odd)在表格中不生效，是因为它只按同级同标签元素计数，若表格含thead/tbody等结构，tbody内首个tr即为第1个tr，应限定作用域为tbody tr:nth-of-type(odd)。
为什么 :nth-of-type(odd) 在表格里经常不生效
直接对 <tr> 用 <code>:nth-of-type(odd) 却没颜色？大概率是因为表格里混入了 <thead>、<code><tbody> 或 <code><tfoot> —— <code>:nth-of-type 是按**同级兄弟元素的标签类型计数**，不是按所有 <tr> 连续编号。比如 <code><thead><tr></tr></thead>
<tbody>
<tr></tr>
<tr></tr>
</tbody> 中，<tbody> 内第一个 <code><tr> 是它所在父容器里的第 1 个 <code><tr>，所以会匹配 <code>:nth-of-type(odd)，但你可能以为它是“全局第 2 行”。
解决思路很明确：把样式作用域收窄到目标容器，比如只给 <tbody> 里的 <code><tr> 上色：
<pre class="brush:php;toolbar:false;">tbody tr:nth-of-type(odd) {
background-color: #f5f5f5;
}</pre>
<p>这样就避开了 <code><thead> 的干扰，也无需手动加 class。
<h3>
<code>:nth-of-type(odd) 和 :nth-child(odd) 在表格中区别在哪
二者在纯 <table><tr><td> 结构里表现可能一样，但只要插入任何其他同级元素（比如注释、空格文本节点、<code><tr class="spacer">），行为就分道扬镳：
<ul>
<li>
<code>:nth-child(odd) 看的是该元素在父元素所有子节点中的位置序号（无视类型）
:nth-of-type(odd) 只统计同名标签（如只算 <tr>），跳过 <code><th>、<code><div>、文本等
<p>表格中更安全的选择是 <code>:nth-of-type(odd)，尤其当你未来可能插入 <tr class="summary"> 这类非数据行时——它不会打乱斑马纹节奏。而 <code>:nth-child(odd) 容易因 DOM 插入导致偶数行突然变色。
如何让斑马纹兼容表头固定（sticky header）场景
当用 position: sticky 固定 <thead> 时，<code><tbody> 滚动后，视觉上第一行数据可能被误认为“第 1 行”，但实际它的 <code>:nth-of-type 序号仍是 1（在 <tbody> 内）。问题出在滚动后用户感知错位，而非 CSS 失效。
<p>稳妥做法是显式重置 <code><tbody> 的起始计数逻辑：
<ul><li>确保 <code><tbody> 是 <code><table> 的直接子元素（避免嵌套 <code><div>）
<li>用 <code>tbody tr:nth-of-type(odd) 而非 tr:nth-of-type(odd)，防止样式泄露到 <thead>
<li>若需高亮“当前可视区首行”，得靠 JS 监听 scroll + 添加临时 class，CSS 本身无法感知滚动位置</li>
<p>顺带一提：<code>background-color 务必设为半透明白色（如 rgba(245, 245, 245, 0.8)）而非纯白，否则在深色主题或滚动阴影下容易看不清边界。
移动端适配时斑马纹突然消失的常见原因
不是 CSS 写错了，而是表格被包裹在 <div class="table-wrapper"> 里并设置了 <code>overflow-x: auto，此时部分安卓 WebView 或旧版 Safari 会重置子元素的伪类计算上下文。
排查和修复建议：
- 检查 DevTools 中对应
<tr> 元素是否真的被选中（右键 → “Inspect” 后看 Styles 面板有没有生效的 <code>:nth-of-type规则） - 把选择器从
tbody tr:nth-of-type(odd)改成table tbody tr:nth-of-type(odd)，增加权重要素，对抗某些 UA 样式重置 - 避免在
<tr> 上同时使用 <code>display: block或flex—— 这会让:nth-of-type完全失效，因为语义化表格结构被破坏真正麻烦的从来不是写对一行 CSS，而是确认它在所有目标环境里都按预期触发 —— 尤其当表格动态渲染、跨框架嵌套或配合 CSS-in-JS 时，
:nth-of-type的“类型”判断可能比你想象中更脆弱。
