17370845950

隔行变色可用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 结构是否干净。