利用CSS3选择器实现表格的斑马纹

最新推荐文章于 2023-12-30 18:32:30 发布

weixin_30315435

最新推荐文章于 2023-12-30 18:32:30 发布

阅读量196

点赞数

原文链接：http://www.cnblogs.com/roseAT/p/10367668.html

版权

要用到的Css3选择器

element:nth-child(number){

}

选择器匹配属于其父元素的第 number 个子元素

参数 Number

odd 奇数
even 偶数

W3School介绍:http://www.w3school.com.cn/cssref/selector_nth-child.asp

完整demo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
</head>
<style>
    #testtable tbody tr:nth-child(odd) {
        /* 匹配奇数行 */
        background-color: lightskyblue;
        color: black;
    }

    #testtable tbody tr:nth-child(even) {
        /* 匹配偶数行 */
        background-color: lightsalmon;
        color: white;
    }
</style>

<body>
    <table id="testtable" border="1" width="100%">
        <thead>
            <tr>
                <th colspan="3">标题</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
            <tr>
                <td>10</td>
                <td>11</td>
                <td>12</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

转载于:https://www.cnblogs.com/roseAT/p/10367668.html

weixin_30315435

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
利用CSS3选择器实现表格的斑马纹

要用到的Css3选择器element:nth-child(number){}选择器匹配属于其父元素的第 number 个子元素参数 Numberodd 奇数even 偶数W3School介绍:http://www.w3school.com.cn/cssref/selector_nth-child.asp　　完整demo:<!...
复制链接

扫一扫