nth-child选择器

最新推荐文章于 2021-01-06 23:24:34 发布

java_zhaoyanli

最新推荐文章于 2021-01-06 23:24:34 发布

阅读量305

点赞数

分类专栏：响应式

本文链接：https://blog.csdn.net/java_zhaoyanli/article/details/51494298

版权

响应式专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        li{list-style: none;width: 50px;height: 50px;background: blue;margin-top:10px;}
        li:nth-child(5){
            background: green;
        }
        .box li{background: red;}
        /* .box li:nth-child(2n){
            background: green;
        }
        .box li:nth-child(2n+1){
            background: pink;
        }
        .box li:nth-child(3n){
            background: blue;
        } */
        /* .box li:nth-child(odd){
            background: blue;
        }
        .box li:nth-child(even){
            background: orange;
        } */

        .box li:nth-child(3n+2){
            background: blue;
        }
    </style>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <h3>以上跟下面的没关系</h3>
    <ul class="box">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>

java_zhaoyanli

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
nth-child选择器

Document li{list-style: none;width: 50px;height: 50px;background: blue;margin-top:10px;} li:nth-child(5){ background: green; } .box li{background: red;
复制链接

扫一扫

专栏目录