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

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

巴特西

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

最新文章

热门文章