CSS:nth系列选择器

最新推荐文章于 2024-03-05 10:46:09 发布

卡布达吃西瓜

最新推荐文章于 2024-03-05 10:46:09 发布

阅读量401

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_46585382/article/details/130021518

版权

nth-child(n) 选择属于其父元素的第n个子元素

<html>
    <head>
        <title>
            demo
        </title>
        
        <style>
            /* 取消表格边框 */
            table{border-collapse:collapse;}
			
			/* 括号中能输入odd表示奇数，输入even表示偶数 */
			/* 可以输入具体的数字表示第几行，注意这里是1开始表示第一行*/
			/* 可以输入公式，例如下面的3n+1,可以理解成3个一组，选中每组的第1个*/
            table tr:nth-child(3n+1) {
                background-color: blue;
                color: white;
            }

        </style>
    </head>
   
    <body>
        <table>
            <tr>
                <td>第一行</td> <td>第一行</td> <td>第一行</td>
            </tr>
            <tr>
                <td>第二行</td> <td>第二行</td> <td>第二行</td>
            </tr>
            <tr>
                <td>第三行</td> <td>第三行</td> <td>第三行</td>
            </tr>
            <tr>
                <td>第四行</td> <td>第四行</td> <td>第四行</td>
            </tr>
            <tr>
                <td>第五行</td> <td>第五行</td> <td>第五行</td>
            </tr>
        </table>
    </body>
</html>