css列表隔行变色怎么写_通过nth child伪类控制行样式

用 nth-child 实现列表隔行变色，核心是利用其公式参数匹配奇数或偶数位置的元素。

匹配奇数行（第1、3、5…项）

给 li:nth-child(odd) 设置背景色，就能让所有奇数位置的列表项变色：

示例代码：

ul li:nth-child(odd) { background-color: #f0f8ff; }

匹配偶数行（第2、4、6…项）

同理，nth-child(even) 专门匹配偶数位置：

ul li:nth-child(even) { background-color: #e6f7ff; }

用公式更灵活地控制（如每3行一循环）

支持 an+b 写法，比如 3n+1 表示第1、4、7、10…项：

• li:nth-child(3n) → 第3、6、9…项（3的倍数）
• li:nth-child(3n+1) → 第1、4、7…项
• li:nth-child(3n+2) → 第2、5、8…项

注意：nth-child 是按父元素下所有子元素顺序计数

如果列表中混有其他标签（如 或标题），nth-child 仍会把它们算进去。此时建议改用 nth-of-type，它只计算同类型（如只算 li）元素：

ul li:nth-of-type(odd) { background-color: #f0f8ff; }