表格列表偶数列、奇数列的CSS样式示例

下面我将详细讲解如何通过CSS实现表格列的奇偶行不同样式。

1. 定义CSS样式

在CSS中，我们可以使用伪类选择器:nth-child()来选择表格中的奇偶行，然后分别设置它们的样式。具体代码如下：

/* 奇数行 */
tr:nth-child(odd) {  
  background-color:#f2f2f2;
}

/* 偶数行 */
tr:nth-child(even) {
  background-color:#e6e6e6;
}

• tr:nth-child(odd)表示选择每个表格的奇数行。
• tr:nth-child(even)表示选择每个表格的偶数行。
• background-color为背景颜色，可以根据实际情况调整。

2. 示例说明

示例一：简单的表格列表

下面是一个简单的表格列表，我们希望将奇数行显示为灰色，偶数行显示为浅灰色。

<table>
  <tr>
    <th>品牌</th>
    <th>价格</th>
  </tr>
  <tr>
    <td>华为</td>
    <td>2999</td>
  </tr>
  <tr>
    <td>小米</td>
    <td>1999</td>
  </tr>
  <tr>
    <td>苹果</td>
    <td>5999</td>
  </tr>
  <tr>
    <td>三星</td>
    <td>3999</td>
  </tr>
</table>

我们可以添加上述的CSS代码来实现奇偶行的不同背景色：

table {
  border-collapse: collapse;  /* 合并单元格边框 */
}

/* 奇数行 */
tr:nth-child(odd) {  
  background-color:#f2f2f2;
}

/* 偶数行 */
tr:nth-child(even) {
  background-color:#e6e6e6;
}

示例二：嵌套列表

下面是一个嵌套列表，我们希望将一级和二级的列表的奇数行分别显示不同的背景色。

<ul>
  <li>一级列表1</li>
  <ul>
    <li>二级列表1-1</li>
    <li>二级列表1-2</li>
  </ul>
  <li>一级列表2</li>
  <ul>
    <li>二级列表2-1</li>
    <li>二级列表2-2</li>
  </ul>
</ul>

我们可以为一级列表和二级列表分别定义class，以便于在CSS中进行选择：

<ul class="Level1">
  <li>一级列表1</li>
  <ul class="Level2">
    <li>二级列表1-1</li>
    <li>二级列表1-2</li>
  </ul>
  <li>一级列表2</li>
  <ul class="Level2">
    <li>二级列表2-1</li>
    <li>二级列表2-2</li>
  </ul>
</ul>

然后我们可以使用以下代码来设置背景色：

/* 一级列表奇数行 */
.Level1 > li:nth-child(odd) {  
  background-color:#f2f2f2;
}

/* 二级列表奇数行 */
.Level2 > li:nth-child(odd) {
  background-color:#e6e6e6;
}

注意要使用子选择器>来限定选择范围。