<style>
    .test-container {
        font-family: "等线";
        font-weight: bold;
    }

    .test-child {
        height: 40px;
        margin: 10px;
        width: calc(50px * 1);
        background-color: red;
        transition: 1s;
    }

    .test-child-1 {
        width: calc(50px * 6);
    }

    .test-child-2 {
        width: calc(50px * 5);
    }

    .test-child-2::after {
        padding-left: 100%;
        font-size: calc(50px * 1);
        content: ",";
    }

    .test-child-3 {
        width: calc(50px * 4);
    }

    .test-child-3::after {
        padding-left: 100%;
        font-size: calc(50px * 1);
        content: ",";
    }

    .test-child-4 {
        width: calc(50px * 7);
    }

    .test-child-5 {
        width: calc(50px * 2);
    }

    .test-child:nth-child(2n-1) {
        background-color: red;
        color: red;
    }

    .test-child:nth-child(2n) {
        background-color: blue;
        color: blue;
    }
</style>

<div class="test-container">
    <div class="test-child test-child-1"></div>
    <div class="test-child test-child-2"></div>
    <div class="test-child test-child-3"></div>
    <div class="test-child test-child-4"></div>
    <div class="test-child test-child-5"></div>
</div>

<style>

.test-container {
    font-family: "等线";
    font-weight: bold;
}

.test-child {
    height: 40px;
    margin: 10px;
    width: calc(50px * 1);
    background-color: red;
    transition: 1s;
}

.test-child-1 {
    width: calc(50px * 6);
}

.test-child-2 {
    width: calc(50px * 5);
}

.test-child-2::after {
    padding-left: 100%;
    font-size: calc(50px * 1);
    content: ",";
}

.test-child-3 {
    width: calc(50px * 4);
}

.test-child-3::after {
    padding-left: 100%;
    font-size: calc(50px * 1);
    content: ",";
}

.test-child-4 {
    width: calc(50px * 7);
}

.test-child-5 {
    width: calc(50px * 2);
}

.test-child:nth-child(2n-1) {
    background-color: red;
    color: red;
}

.test-child:nth-child(2n) {
    background-color: blue;
    color: blue;
}

</style>

<div class="test-container">

<div class="test-child test-child-1"></div>
<div class="test-child test-child-2"></div>
<div class="test-child test-child-3"></div>
<div class="test-child test-child-4"></div>
<div class="test-child test-child-5"></div>

</div>

最后修改:2022 年 04 月 27 日
如果觉得我的文章对你有用,请随意赞赏