每第 3 和第 4 项设计样式

Question

我有一系列应该显示为卡片的项目。每个第 3 和第 4 个项目应该比其他项目更宽（模式：窄 - 窄 -宽-宽- 窄 - 窄 -宽-宽......等等）。到目前为止我尝试过的：

.card {
    &:nth-child(1n) {width: 33%;}
    &:nth-child(2n) {width: 33%;}
    &:nth-child(3n) {width: 66%;}
    &:nth-child(4n) {width: 66%;}
}

当然，这只适用于前 4 项。不过，我希望能够将其用于无限数量的项目。我不能用&:nth-child(3n)和类似的东西弄清楚。

是否可以用 css 网格来解决这个问题？

Answer 1

要选择每一个第3和第4个选项中，您可以使用4n + 3和4n + 4在nth-child选择。

div > div {
  width: 50px;
  display: inline-block;
  height: 50px;
  border: 1px solid black;
}

div > div:nth-child(4n + 3), 
div > div:nth-child(4n + 4){
  width: 100px;
}

<div>
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>