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

最新推荐文章于 2024-10-29 11:32:26 发布

weixin_30315435

最新推荐文章于 2024-10-29 11:32:26 发布

阅读量231

点赞数

CC 4.0 BY-SA版权

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

本文详细介绍了CSS3中nth-child()选择器的使用方法，包括如何选择父元素的奇数和偶数子元素，并通过一个表格实例展示了如何为奇数行和偶数行设置不同的背景颜色和文字颜色，提供了完整的HTML和CSS代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要用到的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>