CSS选择器，行和浮动元素的最后和第一个

Question

我正在努力制作一个流畅的布局，我想在所有卡片上设置margin: 5px;，但第一张卡片会有margin: 5px 5px 5px 0;，而最后一张卡片会有margin: 5px 0 5px 5px; }。

问题是这些卡的容器是流动的，所以我永远不会知道哪张卡是第一张也是最后一张。

有解决方法吗？

我正在尝试这样的事情（但它不起作用）：

&:nth-child(5n-1):not(:first-child) {
    background: #eee;
}

除了CSS，我不想使用任何东西。

Answer 1

你可以用不同的方式思考这个问题。忘了卡片。为父元素添加负边距。这就是bootstrap行/列的工作方式，这是一个很好的解决方案，因为这意味着行上的元素数量是无关紧要的。

.row {
  margin: 0 -5px;
}

示例：

body {
  margin: 0;
}

.container:after,
.row:after {
  display: table;
  content: " ";
  clear: both;
}

.container {
  overflow: hidden;
}

.row {
  margin: 0 -5px;
}

.card {
  background: #FFF;
  outline: 1px solid red;
  width: calc(25% - 10px);
  margin: 5px;
  float: left;
}

<div class="container">
  <div class="row">
    <div class="card">
      Card
    </div>
    <div class="card">
      Card
    </div>
    <div class="card">
      Card
    </div>
    <div class="card">
      Card
    </div>
    <div class="card">
      Card
    </div>
  </div>
</div>