首页 > html > tab > Page Widget - 如何使用CSS3为表行指定替代颜色

Page Widget - 如何使用CSS3为表行指定替代颜色

tab 【tab】
我们想知道如何使用CSS3为表行指定替代颜色。
代码展示 运行结果 

<!DOCTYPE html>
<html>
<head>
<style type='text/css'>

#odd tr:nth-child(odd) {
   background-color: blue;
}
#even tr:nth-child(even) {
   background-color: red;
}
  </style>

</head>
<body>
  <table id="odd">
    <tr>
        <td>IE</td>
        <td>test</td>
    </tr>
    <tr>
        <td>Firefox</td>
        <td>test</td>
    </tr>
    <tr>
        <td>Chrome</td>
        <td>test</td>
    </tr>
    <tr>
        <td>Safari</td>
        <td>test</td>
    </tr>
    <tr>
        <td>Opera</td>
        <td>test</td>
    </tr>
</table>
<table id="even">
    <tr>
        <td>IE</td>
        <td>test</td>
    </tr>
    <tr>
        <td>Firefox</td>
        <td>test</td>
    </tr>
    <tr>
        <td>Chrome</td>
        <td>test</td>
    </tr>
    <tr>
        <td>Safari</td>
        <td>test</td>
    </tr>
    <tr>
        <td>Opera</td>
        <td>test</td>
    </tr>
</table>
</body>
</html>