使用:nth-child(n)可高效实现条纹背景，如tr:nth-child(even)为偶数行设浅灰底色，.news-list li:nth-child(odd)为奇数列表项设淡蓝底，还可通过3n+1等公式自定义间隔模式，提升多行内容可读性。
在网页设计中，为了让表格或多行列表更易读，通常会使用条纹背景来区分相邻行。CSS 的 :nth-child(n) 伪类是实现这种效果的高效方式，无需额外标签或类名即可完成。
理解 :nth-child(n) 的基本用法
该伪类根据元素在其父容器中的位置选择第 n 个子元素。参数 n 可以是数字、关键字或公式：-
:nth-child(2)：选中第二个子元素 -
:nth-child(even)：选中偶数位置的元素（2, 4, 6...） -
:nth-child(odd)：选中奇数位置的元素（1, 3, 5...） -
:nth-child(3n+1)：从第1个开始，每3个选一个（1, 4, 7...）
设置条纹背景：交替行着色
最常见的是为表格或列表添加斑马线效果。以下是一个简单的例子：HTML 结构：
| 第一行 |
| 第二行 |
| 第三行 |
| 第四行 |
CSS 样式：
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:nth-child(odd) {
background-color: #ffffff;
}
这样就能实现偶数行浅灰、奇数行白色的效果，提升可读性。
应用于非表格结构：如列表或卡片布局
不只是 table，任何有多个子项的容器都可以使用此方法。例如一个新闻列表：- 新闻标题一
- 新闻标题二
- 新闻标题三
CSS：
立即学习“前端免费学习笔记（深入）”；
.news-list li:nth-child(odd) {
background-color: #eef7fa;
}
所有奇数项都会带有淡蓝色背景，视觉上更清晰。
高级技巧：自定义间隔模式
如果想每3行一组，只给组内第一行加样式，可以这样写：tr:nth-child(3n+1) {
background-color: #fffacd;
}
这会让第1、4、7、10行呈现浅黄色背景，适用于分组数据展示。
基本上就这些。利用 :nth-child() 不仅简洁，还能保持 HTML 干净，是现代 CSS 布局中非常实用的功能。关键是理解 n 的计算逻辑，灵活搭配 even、odd 或公式表达式，就能轻松实现多样化的间隔样式效果。
