在网页开发中，列表类元素是非常常见的组件，比如商品列表、文章列表、数据表格等，如果所有行的样式完全一致，长时间浏览很容易出现视觉混淆。给列表的奇偶行设置不同的颜色，也就是常说的条纹效果，是提升可读性的常用手段，而css的nth-child(even/odd)选择器就是实现这个效果的核心工具。
nth-child选择器的基本用法
nth-child是css3新增的结构化伪类选择器，用于匹配父元素下特定位置的子元素，其中even表示匹配所有偶数位置的子元素，odd表示匹配所有奇数位置的子元素。需要注意的是，这里的计数从1开始，第一个子元素属于奇数位置。
语法格式
选择器的语法如下：
/* 选择父元素下所有偶数位置的子元素 */
父元素 子元素:nth-child(even) {
样式属性: 属性值;
}
/* 选择父元素下所有奇数位置的子元素 */
父元素 子元素:nth-child(odd) {
样式属性: 属性值;
}
无序列表实现奇偶行条纹效果
无序列表<ul>是最常用的列表类型，下面我们通过实际案例实现它的奇偶行不同颜色效果。
HTML结构
首先准备一个包含6个列表项的无序列表：
<ul class="stripe-list">
<li>列表项一</li>
<li>列表项二</li>
<li>列表项三</li>
<li>列表项四</li>
<li>列表项五</li>
<li>列表项六</li>
</ul>
CSS样式设置
通过nth-child(even)和nth-child(odd)分别设置偶数行和奇数行的背景色：
/* 清除默认列表样式 */
.stripe-list {
list-style: none;
padding: 0;
margin: 20px 0;
width: 300px;
}
/* 设置所有列表项的基础样式 */
.stripe-list li {
padding: 12px 16px;
font-size: 14px;
color: #333;
border-bottom: 1px solid #eee;
}
/* 奇数行背景色 */
.stripe-list li:nth-child(odd) {
background-color: #f9f9f9;
}
/* 偶数行背景色 */
.stripe-list li:nth-child(even) {
background-color: #e8f4ff;
}
上述代码运行后，列表的第一、三、五项为浅灰色背景，第二、四、六项为浅蓝色背景，形成清晰的条纹效果。
有序列表实现奇偶行条纹效果
有序列表<ol>的实现逻辑和无序列表完全一致，只需要调整选择器对应的父元素即可。
HTML结构
<ol class="ordered-stripe-list">
<li>第一章 基础入门</li>
<li>第二章 核心语法</li>
<li>第三章 进阶用法</li>
<li>第四章 实战案例</li>
<li>第五章 性能优化</li>
</ol>
CSS样式设置
.ordered-stripe-list {
width: 300px;
padding-left: 20px;
margin: 20px 0;
}
.ordered-stripe-list li {
padding: 10px 12px;
font-size: 14px;
color: #444;
margin-bottom: 2px;
}
/* 奇数行样式 */
.ordered-stripe-list li:nth-child(odd) {
background-color: #f0f9eb;
color: #67c23a;
}
/* 偶数行样式 */
.ordered-stripe-list li:nth-child(even) {
background-color: #fef0f0;
color: #f56c6c;
}
这个案例中奇偶行不仅背景色不同，文字颜色也做了区分，视觉效果更加明显。
表格行实现奇偶行条纹效果
除了列表元素，表格的<tr>行元素也可以使用同样的方法实现条纹效果，这是数据展示类页面的常用需求。
HTML结构
<table class="data-table">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>张三</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>28</td>
</tr>
<tr>
<td>3</td>
<td>王五</td>
<td>22</td>
</tr>
<tr>
<td>4</td>
<td>赵六</td>
<td>30</td>
</tr>
</tbody>
</table>
CSS样式设置
.data-table {
width: 400px;
border-collapse: collapse;
margin: 20px 0;
}
.data-table th, .data-table td {
border: 1px solid #ddd;
padding: 10px 15px;
text-align: center;
}
.data-table thead tr {
background-color: #409eff;
color: #fff;
}
/* 表格tbody的奇数行 */
.data-table tbody tr:nth-child(odd) {
background-color: #f5f7fa;
}
/* 表格tbody的偶数行 */
.data-table tbody tr:nth-child(even) {
background-color: #ebeef5;
}
需要注意的是，这里的选择器是tbody tr:nth-child(odd)，如果不加tbody前缀，表头行也会被计入计数，导致表头样式不符合预期。
实现注意事项
nth-child的计数包含所有类型的子元素，如果列表项之间有额外的空白文本节点或者其他元素，可能会导致计数错位，建议列表结构保持纯净，只包含<li>子元素。- 如果需要兼容旧版本的浏览器比如IE8及以下，
nth-child选择器无法生效，此时可以考虑使用js给奇偶行添加不同的类名来实现效果。 - 除了
even和odd，nth-child还支持传入公式比如nth-child(2n)等价于even，nth-child(2n+1)等价于odd，可以根据需求灵活调整。 - 如果列表项是动态加载的，新增的列表项也会自动匹配
nth-child的规则，不需要额外修改样式代码。
JS兼容方案
如果需要兼容不支持nth-child的旧环境，可以使用js遍历列表项添加类名：
// 获取所有列表项
const listItems = document.querySelectorAll('.stripe-list li');
// 遍历添加类名
listItems.forEach((item, index) => {
// index从0开始，所以偶数索引对应奇数行
if (index % 2 === 0) {
item.classList.add('odd-item');
} else {
item.classList.add('even-item');
}
});
对应的css只需要定义.odd-item和.even-item的样式即可，和无nth-child时的实现逻辑一致。