在初学HTML5/CSS3的时候我们会接触到列表table的常见属性，但是隔行变色不容易接触到！下面我们可以通过CSS样式来实现列表隔行变色的效果！

html代码如下：

<table align="center">
    <caption>员工信息表</caption>
    <tr height="50">
          <th>姓名</th>
          <th>性别</th>
          <th>工号</th>
          <th>部门</th>
          <th>邮箱</th>
          <th>电话</th>
    </tr>
    <tr>
          <td>张三</td>
          <td>男</td>
          <td>3462</td>
          <td>产品部</td>
          <td>[email protected]</td>
          <td>2467432</td>
    </tr>
    <tr>
          <td>张三</td>
          <td>男</td>
          <td>3462</td>
          <td>产品部</td>
          <td>[email protected]</td>
          <td>2467432</td>
    </tr>
    <tr>
          <td>张三</td>
          <td>男</td>
          <td>3462</td>
          <td>产品部</td>
          <td>[email protected]</td>
          <td>2467432</td>
    </tr>
    <tr>
          <td>张三</td>
          <td>男</td>
          <td>3462</td>
          <td>产品部</td>
          <td>[email protected]</td>
          <td>2467432</td>
    </tr>
    <tr>
          <td>张三</td>
          <td>男</td>
          <td>3462</td>
          <td>产品部</td>
          <td>[email protected]</td>
          <td>2467432</td>
    </tr>
</table>

CSS样式如下：

table{width:600px;border:none;border-collapse:collapse}

td,th{border:1px solid #000;text-align:center;height:40px}

<!--如下是设置偶数行的样式-->
table tr:nth-child(even){background:#f2f2f2;color:#000}

<!--如下是设置奇数列的样式->
table td:nth-child(odd){color:#c00}

<!--如下是设置第一行的样式-->
table tr:nth-child(1){background:#fff;color:#000;font-weight:bold}

<!--如下是设置鼠标触发样式->
table tr:hover{background:#8470FF;colre:#fff;}