:nth-child(odd)不生效是因为它按父元素所有子元素的物理位置计数，而非仅标签；若表格含或非节点，序号即错位，应改用tbody tr:nth-of-type(odd)确保按类型计数。
为什么 :nth-child(odd) 有时没生效？
直接写 tr:nth-child(odd) { background: #f5f5f5; } 却发现第一行没变色，大概率是因为父容器里混入了其他类型子元素（比如 thead、caption 或注释节点）。:nth-child() 计数的是所有子元素位置，不是“第几个 tr”。
常见场景：表格带 thead 时，tbody tr:nth-child(odd) 才真正作用于数据行；若用 tr:nth-of-type(odd) 则更稳妥——它只计同类型元素。
- 优先用
tbody tr:nth-child(odd)，明确限定作用域 - 若结构动态（如服务端渲染可能插入空
div），改用tr:nth-of-type(odd) - 注意 IE9+ 支持
:nth-child，但 IE8 及以下完全不支持，需降级方案（JS 添加 class）
:nth-child(even) 和 :nth-child(2n) 有区别吗？
没有实际区别，:nth-child(even) 是 :nth-child(2n) 的别名，浏览器最终解析为同一逻辑。但写法影响可读性和维护性：
-
even/odd更直观，适合简单斑马纹 -
2n/2n+1更灵活，比如:nth-child(3n)每三行一色，:nth-child(4n+2)选第 2、6、10 行 - 不要混用：
:nth-child(odd)和:nth-child(2n+1)效果相同，但代码里统一风格能减少歧义
如何避免斑马纹被内联样式或 !important 覆盖？
CSS 优先级是关键。如果某行 tr 带了 style="background: white !important;"，伪类选择器根本无效。
- 确保斑马纹规则在 CSS 文件中靠后声明（或用更具体的选择器，如
.data-table tbody tr:nth-child(odd)） - 避免在 HTML 中写内联样式控制背景色；把状态类交给 JS 控制（如
class="error"），再用.error { background: #fee !important; }覆盖斑马纹 - 调试时右键检查元素，在浏览器开发者工具里看哪条
background被划掉——被划掉的说明被更高优先级规则覆盖了
移动端或高对比度模式下斑马纹还适用吗？
斑马纹本质是视觉辅助，但在某些场景反而干扰可访问性：
- Windows 高对比度模式下，自定义背景色可能被系统强制替换为纯黑/白，导致文字不可读
- 深色模式下，
#f5f5f5在暗背景上几乎看不见，应配合@media (prefers-color-scheme: dark)调整色值 - 对色觉障碍用户，仅靠颜色区分行不够可靠；建议搭配细微边框（如
border-bottom: 1px solid rgba(0,0,0,0.05)）增强分隔感
最易被忽略的一点：斑马纹不是必须项。当表格列数少、行数少（
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
