根据同级元素数量，为CSS样式的第一个元素设定样式

Question

我从后端接收到不固定数量的项目。

如果项目数为奇数，则第一个项目应该是第一行中唯一的项目。

其他所有项目应该每行显示两个。如果项目数为偶数，则任何行中都不应该有单个项目。

我坚信有一种只使用CSS的方法来实现这一点（我可以轻松地用JS解决，但更喜欢使用CSS方法），只是我还没有找到正确的组合。

HTML：

<div class="row">
  <div class="col">A</div>
  <div class="col">B</div>
  <div class="col">C</div>
  <div class="col">D</div>
</div>

CSS：

.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 0 0 50%;
  background: gray;
  text-align: center;
}
.col:first-child { // should only hit for an odd amount of items
  flex: 0 0 100%;
}

Codepen

- mholzer78

Answer 1

是的，使用以下CSS可以实现：

.col:first-child:nth-last-child(odd) {
  flex: 0 0 100%;
}

.row {
  display: flex;
  flex-wrap: wrap;
}
.col {
  flex: 0 0 50%;
  background: gray;
  text-align: center;
}

.col:first-child:nth-last-child(odd) {
  flex: 0 0 100%; // should only hit for an odd amount of items
}

<p>Even</p>
<div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
</div>

<p>Odd</p>
<div class="row">
    <div class="col">A</div>
    <div class="col">B</div>
    <div class="col">C</div>
    <div class="col">D</div>
    <div class="col">E</div>
</div>

另外还可以参考相关文章：CSS能检测一个元素拥有的子元素数量吗？

- larsmagnus