:nth-child(odd)和:nth-child(even)可直接为列表奇偶行设不同背景色，如ul li:nth-child(odd){background:#e6f7ff}、ul li:nth-child(even){background:#f5f5f5}，需确保父元素下仅含li子元素以避免错位。
用 :nth-child(odd) 和 :nth-child(even) 就能轻松实现列表奇偶行不同颜色，无需额外类名或 JavaScript。
基础写法：直接作用于 li 元素
假设你有一个无序或有序列表，最简方式是给 li 添加交替背景色：
- 奇数行（第1、3、5…项）用浅蓝背景
- 偶数行（第2、4、6…项）用浅灰背景
对应 CSS：
ul li:nth-child(odd) {
background-color: #e6f7ff;
}
ul li:nth-child(even) {
background-color: #f5f5f5;
}
注意：:nth-child 是按父元素子元素顺序计算的
它不只看 立即学习“前端免费学习笔记（深入）”； 除了 现代浏览器（Chrome、Firefox、Safari、Edge）均支持 li，而是看所有同级子元素的位置。如果列表中混有其他标签（比如注释、空格文本节点一般不影响，但 或 会干扰），可能导致样式错位。稳妥做法是确保 ul 或 ol 下只有 li 子元素。
干扰项
进阶技巧：从第 n 项开始交替或自定义周期
odd/even，:nth-child() 支持公式语法，比如 an+b：
li:nth-child(2n+1) 等价于 odd（1,3,5…）li:nth-child(2n) 等价于 even（2,4,6…）li:nth-child(3n) 每 3 行高亮一次（3,6,9…）li:nth-child(4n+2) 从第 2 行起，每 4 行一循环（2,6,10…）兼容性提示
:nth-child，IE9+ 也支持。如需兼容 IE8 及更早版本，需改用 JS 或服务端生成 class（如 class="odd"/class="even"）。
