CSS:nth系列选择器

  1. 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>

CSS:nth系列选择器_第1张图片

  1. nth-last-child(n)同上,从最后一个子元素开始计数。

  2. nth-of-type(n) 选择属于其父元素第n个相同类型元素,上面的例子就是只选中tr行,其余的都不在范围内。

  3. nth-last-of-type(n) 同上,但是从最后一个子元素开始计数。

你可能感兴趣的:(css,前端)