:nth-child(odd)和:nth-child(even)可直接实现列表隔行变色，但需确保父元素下仅含标签；若混杂其他节点，应改用li:nth-of-type(odd/even)以精准匹配元素，避免序号偏移。
怎么用 :nth-child(odd) 和 :nth-child(even) 给列表隔行变色
直接写就能生效，不需要 javaScript。关键是要理解 :nth-child 是按父元素下的所有子元素顺序计数，不是只看
或空格文本节点），序号可能错位。
-
:nth-child(odd) 匹配第 1、3、5… 个子元素（即奇数位置）
-
:nth-child(even) 匹配第 2、4、6… 个子元素（即偶数位置）
- 要确保目标是纯
或
，且内部只有
，否则序号容易偏移
为什么 :nth-of-type 有时比 :nth-child 更稳妥
当列表中存在非
元素（如辅助
或服务端注入的占位节点），:nth-child 会把它们一起计数，导致样式“跳项”。这时改用 :nth-of-type 只统计同类型标签（
），更可靠。
-
li:nth-of-type(odd) → 只对第 1、3、5… 个
生效，无视中间夹杂的其他标签
- 注意：不能写成
ul li:nth-of-type(odd)，因为
的兄弟节点必须是其他
才算“同类型”；若父容器下还有
等，不影响计数
- 兼容性没问题，IE9+ 都支持
常见错误：背景没生效或全白/全灰
最常踩的坑是 css 优先级或继承干扰。比如父级设了 background-color，或者某条规则用了 !important 锁死颜色；也可能是伪类写法有误（漏空格、括号不匹配）。
- 检查是否误写成
li:nth-child(odd){}（少冒号）→ 正确是 li:nth-child(odd){}
- 确认没有更高优先级的选择器覆盖，例如
ul li { background: #fff; } 会压过 :nth-child 规则
- 避免在
上同时设 background 和 background-color，后者会被前者覆盖
ul li:nth-child(odd) { background-color: #f5f5f5; } ul li:nth-child(even) { background-color: #ffffff; }
如果列表结构复杂、动态插入内容频繁，或者需要兼容老版本 IE（:nth-child 或 :nth-of-type 就够用，别绕弯。真正要注意的，是 dom 结构是否干净。