写一个隔行变色的样式

在前端开发中，我们可以使用CSS来实现隔行变色的效果。这通常是通过为表格的行（<tr>）或者列表项（如<li>）添加不同的背景色来实现的。以下是一个简单的示例，展示了如何为HTML表格实现隔行变色效果：

HTML代码：

  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>城市</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>王五</td>
    <td>28</td>
    <td>深圳</td>
  </tr>
  <!-- 更多行 -->
</table>

CSS代码（使用:nth-child()选择器）：

table {
  width: 100%;
  border-collapse: collapse; /* 合并边框 */
}

th, td {
  border: 1px solid #ddd; /* 添加边框 */
  padding: 8px; /* 添加内边距 */
  text-align: left; /* 文本左对齐 */
}

/* 为偶数行添加背景色 */
tr:nth-child(even) {
  background-color: #f2f2f2; /* 浅灰色背景 */
}

在这个示例中，我们使用了CSS的:nth-child()选择器来为表格的偶数行添加背景色。你可以根据需要调整背景色和其他样式。如果你想为奇数行添加背景色，只需将even替换为odd即可。