tbody tr:nth-child(even)经常不生效，因tr父元素非tbody时浏览器将thead、caption等计入序号；应显式包裹tbody并用tbody tr:nth-child(even)或更鲁棒的tbody tr:nth-of-type(even)。
tbody tr:nth-child(even) 为什么经常不生效
直接写 tr:nth-child(even) 却没变色，八成是表格结构里混入了 thead、caption 或空格/注释节点。浏览器按 DOM 中所有子元素顺序编号，thead > tr 算第 1 行，那 tbody > tr 的第一个就变成第 2 或第 3 个子元素，根本匹配不上 :nth-child(even)。
实操建议：
- 用开发者工具选中某行
tr，看Computed面板里background-color是否被其他规则覆盖 - 临时删掉
thead测试——如果这时样式突然生效，就是表头干扰了计数 - 确保
tbody显式存在（哪怕只有一组数据），别依赖浏览器自动补全
tbody tr:nth-of-type(even) 更靠谱吗
是的。:nth-of-type() 只统计同类型标签（这里是 tr），完全无视 thead、colgroup、注释这些非 tr 兄弟节点。它数的是“第几个 tr”，不是“第几个子节点”，更贴近人对“第 2 行”的直觉。
但注意两个坑：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 别写
table tr:nth-of-type(even)——这样会把thead tr也计入，反而出错 - 必须带
tbody前缀：tbody tr:nth-of-type(even)，否则可能误染表头或页脚 - IE8 不支持
:nth-of-type()，如需兼容，只能 JS 动态加 class
合并单元格（rowspan）会影响斑马纹吗
不影响 :nth-child 或 :nth-of-type 的计数逻辑——它们只看 DOM 中 tr 标签是否存在，不感知视觉高度。哪怕某行 rowspan="5"，它仍只算一个 tr 节点，后续序号照常递增。
但视觉上可能断层：长 rowspan 行拉高后，相邻两行颜色相同，看起来像“漏了一格”。这不是 CSS 错，而是设计问题：
- 别为对齐颜色手动加 class，违背样式与结构分离原则
- 给
rowspan行单独设背景：tr[rowspan] { background-color: #f0f9ff; } - 用细边框强化节奏：
tr { border-bottom: 1px solid #eee; }
动态插入新行时斑马纹还有效吗
有效。CSS 伪类是实时计算的，JS 插入新 tr 后，浏览器会自动重新匹配 :nth-child 和 :nth-of-type，无需手动刷新或重算奇偶状态。
但前提是 DOM 结构干净：
- 避免在
tbody里嵌form标签——HTML 规范不允许，浏览器会把它提到tbody外，导致tr父级变更，伪类彻底失效 - React/Vue 渲染后新增行，只要最终 HTML 是标准结构（
tbody > tr），伪类照样工作 - 如果用了
display: table模拟表格，确保tr是父容器的直接子元素且顺序连续
#f9f9f9）在低亮度屏或弱视用户眼里可能难区分，务必用工具测文字与背景的对比度，至少达到 WCAG AA 级（4.5:1）。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
