css 结构伪类选择器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 偶数 */
        /* ul li:nth-child(2n){
            background-color: aqua;
        } */
        /* 奇数 */
        /* ul li:nth-child(2n-1){
            background-color: aqua;
        } */
        /* 找到前三个 */
        /* ul li:nth-child(-n+3){
            background-color: aqua;
        } */
        /* 4的倍数 */
        ul li:nth-child(4n){
            background-color: skyblue;
        }
    </style>
</head>
<body>

    <ul>
        <li>这是第1个列表</li>
        <li>这是第2个列表</li>
        <li>这是第3个列表</li>
        <li>这是第4个列表</li>
        <li>这是第5个列表</li>
        <li>这是第6个列表</li>
        <li>这是第7个列表</li>
        <li>这是第8个列表</li>
    </ul>

</body>
</html>

 

posted on 2022-09-22 16:12  totau  阅读(9)  评论(0)  编辑  收藏  举报

导航