HTML隔行变色

 

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <table   align="center">
            
            <tr>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
            </tr>
            <tr>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
            </tr>
            <tr>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
            </tr>
            <tr>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
            </tr>
        </table>
        
    </body>
</html>


css：


    table{
                width: 600px;
                height: 300px;
                text-align: center;
                
            }
            table,td,tr{
                border: 1px solid black;
                border-collapse: collapse;
            }
            table tr:nth-child(odd){
                color: aqua;
            }
            table tr:nth-child(even){
                color: coral;
            }
            
            tr:hover td{
                color: #000000; 
            }

 

posted @ 2020-04-29 00:47  陈小歪、  阅读(1236)  评论(0)  编辑  收藏  举报