我如何将其变成动态的：nth-​​child css选择器

Question

我正在研究一个带有CSS的菱形网格系统，我需要移动第5个块，然后是第12个，第19个，第26个，依此类推。我怎么能把它变成动态的第n选择器？

.diamond-grid > div:nth-child(26),
.diamond-grid > div:nth-child(19),
.diamond-grid > div:nth-child(12),
.diamond-grid > div:nth-child(5) {
    margin-left: 182px;
}

Answer 1

由于您从第5个元素开始选择每个第7个元素，因此请使用:nth-child(7n + 5)：

.diamond-grid > div:nth-child(7n + 5) {
  margin-left: 182px;
}

如果你想从第26个元素开始并选择每个前面的第7个元素：

.diamond-grid > div:nth-child(-7n + 26) {
  margin-left: 182px;
}

Answer 2

尝试

.diamond-grid > div:nth-child(7n+5){
    margin-left: 182px;
}

Answer 3

您可以在此处找到解决方案：https://css-tricks.com/how-nth-child-works/

在您的情况下，我认为您需要的是1: 44.4921875 2: 44.4921875 M: 66.640625 10: 88.984375

<强>解释

:nth:child(7n+5){ }是您必须设置的步骤，7n是起始元素。