nth-child(odd) 斑马纹偶数行未变色是因父容器混入非tr元素导致计数错位；移动端:hover失效因无持续hover状态，应优先用:active或JS添加class；斑马纹与悬停冲突时需提高选择器优先级并避免background简写。
用 nth-child(odd) 实现斑马纹时为什么偶数行没变色？
常见原因是父容器里混入了非 <tr> 元素（比如 <code><caption></caption>、注释、空格文本节点），导致 nth-child 计数错位。浏览器按 DOM 顺序计数，不区分标签类型。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 确保
<tbody> 显式包裹所有数据行，把 <code><thead> 和 <code><tfoot> 分开处理 <li>改用 <code>tbody tr:nth-child(odd)，限定作用域 - 或改用
tbody tr:nth-of-type(odd)，它只统计<tr> 标签，更鲁棒 <li>避免在 <code><tbody> 内写注释或换行符——它们会成为 text node 干扰 <code>nth-childCSS 悬停效果在移动端失效的真正原因
不是“移动端不支持
:hover”，而是多数触摸设备没有 hover 状态持续期，:hover只在点击瞬间触发，且常被系统级点击反馈覆盖。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对需要触控反馈的表格，优先用
:active+transition做瞬时高亮，例如：tr:active { background-color: #eef; } - 如需类 hover 的持久态，配合 JS 监听
touchstart添加临时 class，再用 CSS 控制样式 - 不要依赖
:hover做关键信息提示（比如显示隐藏操作按钮），那在 iPad 上大概率看不见 - 桌面端保留
:hover，移动端用媒体查询隔离：@media (hover: hover) and (pointer: fine) { tr:hover { ... } }
斑马纹 + 悬停同时生效时背景色冲突怎么解？
典型问题是悬停时背景色被斑马纹的
background-color覆盖，或者悬停态消失后斑马纹错乱（尤其动态增删行后）。实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用更具体的 CSS 选择器提升悬停样式的优先级，例如：
tbody tr:hover, tbody tr.hover { background-color: #f8f9fa !important; } - 斑马纹只设
background-color，悬停也只改background-color，避免混用background简写（它会重置background-image等） - 动态插入行时，别用
innerHTML +=，改用insertRow()或appendChild()，否则nth-child计数会断掉 - 如果用了 JS 控制悬停态，记得在
touchend后清除 class，否则状态残留
最易被忽略的是：当表格有
border-collapse: collapse时，相邻<tr> 的边框合并可能让斑马纹色块看起来偏窄或错位。此时要么给 <code>tr加border-bottom统一视觉节奏，要么用box-shadow: inset 0 -1px模拟分隔线——纯色背景下这点特别明显。 - 对需要触控反馈的表格，优先用
