HTML使用CSS实现表格隔行变色

 :nth-child(n) 选择器匹配父元素中的第n个子元素。n可以是一个数字，一个关键字，或者一个公式

隔行变色公式：

偶数：        :nth-child(2n)

奇数：        :nth-child(2n-1)

<style>
 
        table{
 
            /* border: 1px solid gainsboro; */
 
            border-collapse: collapse;      /*合并单元格的边框 */
 
            width: 800px;
 
            text-align: center;
 
        }
 
        th,td{
 
            /* border: 1px solid gainsboro; */
 
            height: 30px;
 
        }
 
        /* th{
            border: none;                /*没有边框*/
 
        } */
 
        thead tr{
 
            background-color: #000;
 
            color: #fff;
 
        }
 
        td{
 
            border-bottom: 1px solid red;
 
        }
 
        tbody tr:nth-child(2n){
 
            background-color: rgb(112, 198, 231);
 
        }
 
        tbody tr:nth-child(2n):hover{
 
            background-color: rgb(54, 221, 152);
 
        }
 
        tbody tr:hover{
 
            background-color: rgb(247, 133, 203);
 
        }
 
    </style>

扫描二维码手机查看该文章