:nth-child(odd)和:nth-child(even)是最直接的奇偶行样式实现方式，语义清晰、兼容IE9+，需作用于li等目标元素而非容器，注意层级选择器与DOM结构干扰。
用 :nth-child(odd) 和 :nth-child(even) 最直接
纯 CSS 就能搞定，不需要 JS 或额外 class。浏览器支持从 IE9+ 开始，现代项目基本无兼容问题。
关键点在于：必须作用在 <li> 上，而不是 <ul> 或 <ol> 容器本身——否则样式不生效。
-
li:nth-child(odd) { background: #f5f5f5; }给第 1、3、5… 行上色 -
li:nth-child(even) { background: #ffffff; }给第 2、4、6… 行上色 - 注意顺序：如果两个规则冲突，后写的会覆盖前写的；建议 odd 在前、even 在后，符合阅读直觉
为什么不用 :nth-of-type()？
当列表里混有其他元素（比如 <div> 或注释节点）时，:nth-of-type() 会漏掉部分 <li> —— 因为它只统计同类型（<li>）的兄弟节点，而 :nth-child() 统计所有兄弟位置。
举例：如果 <ul> 里插了一个 <div class="separator">，那么后面的 <li> 的 :nth-of-type(2) 可能对应实际第 4 个子节点，导致背景错位。
立即学习“前端免费学习笔记（深入）”；
除非你明确控制 DOM 结构且保证只有 <li>，否则优先选 :nth-child()。
遇到嵌套列表时样式失效怎么办？
常见错误是写了 ul li:nth-child(odd)，结果所有子列表也跟着变色——因为选择器没限定层级。
- 若只要最外层列表生效，写成
ul > li:nth-child(odd)（用子选择器>） - 若子列表也要隔行变色，但颜色不同，可加 class 区分：
ul.main > li:nth-child(odd)和ul.sub > li:nth-child(odd) - 避免用
ul li这种后代选择器，容易穿透到深层嵌套
滚动区域里偶现闪烁或错位
在虚拟滚动、React/Vue 动态渲染或高度不固定的列表中，:nth-child 有时会因 DOM 重排/复用而短暂错乱（比如新 item 插入后序号未及时更新）。
这不是 CSS 问题，而是渲染时机导致的视觉假象：
- 确保 key 值稳定（如用唯一 id，而非 index）
- 避免用
display: none隐藏某些<li>——它仍参与:nth-child计数，会导致“看起来”奇偶错乱 - 真要动态过滤，用
visibility: hidden或移除节点，而非隐藏
真正需要动态控制背景色的复杂场景，就该交给 JS 管理 class，而不是强依赖 CSS 伪类。
