使用CSS3 nth-child伪类实现表格隔行变色效果 - 教程

一、什么是伪类？

CSS（Cascading Style Sheets）是一种用于规定文档样式的语言。CSS3是一个较新的版本，其中包含了许多新的选择器，比如伪类。伪类可以被用来选择没有被HTML文档本身的“指针”所指中的元素，并且可以添加特定的样式。

例如，使用CSS3的:hover伪类可以在用户把鼠标放在一个元素上时改变该元素的样式。在本教程中，我们将会使用CSS3的:nth-child伪类来实现表格隔行变色效果。

二、什么是nth-child伪类？

CSS3的:nth-child伪类可以根据某个元素的位置来选择元素，而不是根据它们在HTML代码中出现的顺序。例如，使用:nth-child(2)可以选择一个元素的第二个子元素。如果您需要更多关于:nth-child的用法，请参阅MDN文档。

三、如何使用:nth-child伪类实现表格隔行变色效果？

在这个例子中，我们会用:nth-child来选择每个表格中需要变色的行。我们将会给奇数行添加背景色，以便使它们与偶数行区分开来。

/* 给奇数行添加背景色 */
tr:nth-child(odd) {
    background-color: #F2F2F2;
}

上面的代码将选择每个表格行的奇数行，并且添加背景色。您可以根据自己的需要更改背景色的值。

如果您想要给偶数行添加背景色，那么您只需要把odd改为even即可：

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

四、完整的示例代码

下面是一个完整的表格隔行变色效果的示例代码：

<style>
/* 给奇数行添加背景色 */
tr:nth-child(odd) {
    background-color: #F2F2F2;
}
</style>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>20</td>
    <td>男</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>21</td>
    <td>女</td>
  </tr>
  <tr>
    <td>小强</td>
    <td>22</td>
    <td>男</td>
  </tr>
</table>

使用上述代码，您可以得到一个简单的表格，其中奇数行的背景色为淡灰色。