每第 3 和第 4 项设置样式

Question

我有一组应显示为卡片的项目。每第 3 项和第 4 项都应比其他项宽（模式：窄 - 窄 - 宽 - 宽 - 窄 - 窄 - wide - wide... 等等）。到目前为止我尝试了什么：

.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

至select，您可以在nth-child select 中使用4n + 3 和4n + 4 每第3 和第4 项。

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

到select，你可以在nth-child select或

中使用3n + 3和4n + 4，每第3和第4个项目

每第 3 和第 4 项设置样式

Styling every 3rd and 4th item

html

css

css-selectors

css-grid