CSS nth-child表达式删除最后一行的margin-bottom

Question

我正在创建以两列显示的列表，每个.customer-review-container都有一个边距底部，如下所示：

<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个）的margin-bottom。

Answer 1

这就是你需要的：

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

<强> Sample DEMO

Answer 2

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

Answer 3

使用：

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

:nth-child(n+3)将针对索引优于或等于3的每个div（索引星标为1）。

---

修改

如果您想定位最后一行，无论是否有一个或两个元素，请使用此选择器：

div:nth-last-child(-n+2):nth-child(odd) > .customer-review-container,
div:nth-last-child(-n+2):nth-child(odd) + div > .customer-review-container {
    margin-bottom: 0;
}

示例：

＆＃13;

＆＃13;

.wrapper {
  border: 1px solid red;
  overflow: hidden;
}
.customer-review-container {
  border: 1px solid black;
  margin-bottom: 20px;
}
div:nth-last-child(-n+2):nth-child(odd) > .customer-review-container,
div:nth-last-child(-n+2):nth-child(odd) + div > .customer-review-container {
  margin-bottom: 0;
  background: blue;
}

＆＃13;

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
  <div class="col-md-6">
    <div class="customer-review-container">
      Lorem
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 4

您可以使用nth-last-child(n)选择器，如下所示：

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

这将选择最后两个孩子