最近在调整网站前端样式时，想实现一个小效果：让  <li>  列表的奇数行（第1、3、5行）与偶数行（第2、4、6行）呈现不同的视觉样式。查了下 CSS 文档，发现使用  :nth-child()  伪类选择器就能轻松实现。这里简单记录实现过程，希望能帮到有同样需求的同学。

CSS代码

/* 奇数项（第1、3、5...个 li） */
.static li:nth-child(odd){
    /*填写需要的样式*/
    background: #f84975;
}
/* 偶数项（第2、4、6...个 li） */
.static li:nth-child(even){
    /*填写需要的样式*/
    background: #ff7a66;
}

注释说明

:nth-child(odd) 等同于 :nth-child(2n+1)

:nth-child(even) 等同于 :nth-child(2n)

示例Html代码

<div class="static">
  <li>第1项（单数）</li>
  <li>第2项（双数）</li>
  <li>第3项（单数）</li>
  <li>第4项（双数）</li>
  <li>第5项（单数）</li>
  <li>第6项（双数）</li>
</div>

示例截图