css隔行变色效果如何实现_利用css:nth child设置奇偶样式

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