斑马线列表
创建一个具有交替背景颜色的斑马线列表。
- 使用
: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;
}