tbody tr:nth-child(even)更安全，因table直接子元素常为thead/tbody/caption，table tr:nth-child(even)易因表头占据序号而失效；tbody内tr为直系子元素，序号连续无干扰。
直接用 tr:nth-child(even) 和 tr:nth-child(odd) 就能实现，但必须限定作用域，否则大概率失效。
为什么 tr:nth-child(even) 在表格里经常不生效
因为 tr 的父元素不是 table，而是 thead、tbody 或 tfoot。直接写 tr:nth-child(even) 会分别在每个包裹容器内计数——thead tr 占了第1、2个位置，tbody tr 就从第1个重新开始算，导致第一行数据被当成“奇数行”，根本没被 even 匹配到。
- 错误写法：
tr:nth-child(even) { background: #f5f5f5; }（表头和数据混算，样式错位） - 正确做法：只作用于数据行，加
tbody前缀：tbody tr:nth-child(even) - 如果用了
caption或注释节点，它们不算子元素，不影响计数；但colgroup里的col不是tr兄弟，也不干扰
nth-child(odd) 和 nth-of-type(odd) 到底该选谁
两者都按 DOM 顺序编号，但关键区别在于：前者统计父元素下所有子元素位置，后者只统计同类型标签（如所有 tr）的顺序。
- 当
tbody内只有tr，二者效果一致；但若中间插了div或comment节点，nth-child会跳过该tr（因为它不在对应物理位置），而nth-of-type仍能按tr的序号匹配 - 不过
nth-of-type在thead/tbody分离结构中不可靠——thead tr:nth-of-type(odd)和tbody tr:nth-of-type(odd)各自独立计数，无法跨区域统一 - 结论：优先用
tbody tr:nth-child(even)，结构干净时最稳；若 DOM 不可控，且确定tbody内无其他标签，可换tbody tr:nth-of-type(even)
动态插入或响应式布局下，隔行变色突然乱了怎么办
nth-child 每次重排 DOM 都会实时重算位置。往列表中间插入一个新 li，后面所有元素序号全变；flex-wrap 后视觉上换行了，但 DOM 顺序没变，nth-child(odd) 还是选 1、3、5……根本不是“隔视觉行”。
- Vue/React 中用
v-if或key控制显隐，会删/增节点，触发重排 → 改用v-show保持节点存在 - 需要固定样式（比如导出 PDF、打印预览），服务端渲染时就加好
class="row-odd"或class="row-even" - 前端动态场景，插入后手动更新 class：
element.classList.toggle('even', index % 2 === 0)，index 来自 JS 遍历或状态管理 - 别指望 CSS 自适应 flex/grid 换行——浏览器不感知视觉行，这是底层限制，不是写法问题
真正容易被忽略的，是「上下文」二字：不是写对了伪类就完事，而是得确认它在哪个父容器里数、数的是哪些兄弟、有没有非目标节点插队。一旦脱离干净结构，nth-child 就从便利工具变成隐形陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
