通过CSS给最后一行的div设置一个统一的样式

HTML代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        * {
            padding: 0;
            margin: 0;
        }

        .div-container {
            width: 800px;

        }
        .item {
            float: left;
            width: 20%;
            height: 100px;
            background-color: red;
        }

        /*
        选中最后一行
        */
        .item:nth-last-child(6) ~ div {
            background-color: #61F5E9;
        }

    </style>
</head>
<body>

    <div class="div-container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
        <div class="item">7</div>
        <div class="item">8</div>
        <div class="item">9</div>
        <div class="item">10</div>
    </div>

</body>
</html>

效果图:

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注