斑马线列表

创建一个具有交替背景颜色的斑马线列表。

  • 使用 :nth-child(odd):nth-child(even) 伪类选择器,根据元素在兄弟元素组中的位置来应用不同的 background-color

[!TIP]

您可以将其用于应用不同的样式到其他 HTML 元素,如 <div><tr><p><ol> 等。

<ul>
  <li>项目 01</li>
  <li>项目 02</li>
  <li>项目 03</li>
  <li>项目 04</li>
  <li>项目 05</li>
</ul>
li:nth-child(odd) {
  background-color: #999;
}