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

【问题标题】：CSS nth-child expression to remove margin-bottom of last rowCSS nth-child 表达式删除最后一行的边距底部
【发布时间】：2014-11-10 17:27:30
【问题描述】：

我正在创建以两列显示的列表，每个.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>

我想做的是创建一个第 n 个子表达式来删除最后一行（第 3 和第 4 行）的 margin-bottom，所以我尝试使用代码：

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

但它只会删除最后一个 div（第 4 个）的 margin-bottom。

【问题讨论】：

标签： html css margin css-selectors

【解决方案1】：

这是你需要的：

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

Sample DEMO

【讨论】：

现在我在响应时遇到问题，无法正常工作。请给我关于响应式显示的建议。

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以像这样使用nth-last-child(n) 选择器：

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

这将选择最后两个孩子

【讨论】：

【解决方案4】：

用途：

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;
}

示例：

.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;
}

<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>

【讨论】：

感谢您的代码。但是如果我有更多的 4 列，它就不起作用了。
哇，好的，你想定位最后两个吗？
@TheHung 我添加了想要的选择器，只针对最后一行的元素（即使有 5/7/9... 元素）