隔行变色可用nth-child(odd/even)实现，兼容IE9+；需注意其按父元素所有子元素排序，混用标签时建议限定范围或改用nth-of-type。
隔行变色效果可以直接用 nth-child 伪类实现，无需 JavaScript，兼容性好（IE9+），写法简洁清晰。
基础写法：奇数行和偶数行分别设置背景色
最常用的是给表格行（tr）或列表项（li）添加交替样式：
-
tr:nth-child(odd)匹配第 1、3、5… 行（奇数位置） -
tr:nth-child(even)匹配第 2、4、6… 行（偶数位置）
示例：
tr:nth-child(odd) { background-color: #f9f9f9; }
tr:nth-child(even) { background-color: #ffffff; }注意：:nth-child 是按父元素下所有同级子元素排序的
如果表格里混用了 thead、tbody 或插入了其他标签（如 div、注释、空格文本节点不影响，但元素节点会参与计数），nth-child 仍按整体顺序编号。例如：
立即学习“前端免费学习笔记（深入）”；
| 标题 |
|---|
| 数据1 |
| 数据2 |
此时 tr:nth-child(odd) 会作用于第1、3行（含表头），若只想对 tbody 中的数据行生效，建议改用 tbody tr:nth-child(odd) 或更稳妥的 tr:not(:first-child) 配合使用。
进阶技巧：自定义循环周期或特定行
nth-child 支持公式写法：an+b，其中 a 是周期，b 是偏移量：
-
tr:nth-child(3n)→ 每3行一循环，匹配第3、6、9…行 -
tr:nth-child(3n+1)→ 匹配第1、4、7…行 -
tr:nth-child(5n+2)→ 匹配第2、7、12…行
适合做分组高亮、特殊标记等场景。
替代方案：:nth-of-type 更语义化（按标签类型计数）
如果父容器中存在多种标签（比如 div、p、section 混排），而你只想选中其中的 tr 或 li，用 :nth-of-type 更准确：
li:nth-of-type(odd) { background: #eef; }
li:nth-of-type(even) { background: #ddf; }它只计算同为 li 的兄弟元素，忽略其他标签，逻辑更贴近“第几个 li”。
实际项目中优先用 nth-child(odd/even)，简单直接；结构复杂时考虑 nth-of-type 或限定父容器范围。不复杂但容易忽略细节，关键看 HTML 结构是否干净。
