html - CSS nth-child 表达式删除最后一行的底部边距

Question

我正在创建以两列显示的列表，每个 .customer-review-container 都有一个 margin-bottom，如下所示:

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

<div class="col-md-6">
    <div class="customer-review-container">

    </div>  <!-- end customer-review-container -->
</div>

我想做的是创建一个 nth-child 表达式来删除最后一行(第 3 和第 4 行)的 margin-bottom，所以我尝试使用代码:

div:nth-child(3n+1).customer-review-container{
    margin-bottom: 0;
}

但它只会删除最后一个 div(第 4 个)的边距底部。

Answer 1

这是你需要的:

.col-md-6:nth-last-child(-n+2) .customer-review-container {
     margin-bottom: 0;
}

Sample DEMO