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>

Answer 2

要选择每个第3和第4项，您可以在第n个孩子选择器中使用3n + 3和4n + 4。

每个第3和第4项的样式

2 个答案: