我怎樣才能使這成爲一個動態的：第十二個孩子的CSS選擇器

我正在與CSS的鑽石網格系統，我需要移動第5個塊，然後第12,19,26等，以此類推左邊。我怎麼能把它變成動態的第n個選擇器？我怎樣才能使這成爲一個動態的：第十二個孩子的CSS選擇器

.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; 
}

來源

2016-01-27 Andor Nagy

的解決方案，您可以在這裏找到：https://css-tricks.com/how-nth-child-works/

在你的情況，我想你需要的是:nth:child(7n+5){ }

說明：

7n是你要設置的步驟，5是起始元素。

來源

2016-01-27 14:42:55 djl

謝謝你的解釋。我也看過CSS-Tricks文章，但無法弄清楚。也許我沒有足夠注意。 –

@AndorNagy我不認爲這是*注意*儘可能多*努力* –

既然你選擇從第5個元素開始每隔7個元素，使用:nth-child(7n + 5)：

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

如果你想開始在第26元素，選擇每個以前第七元素：

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

來源

2016-01-27 14:37:56

我剛剛發現我的一箇舊的答案與字面[完全相同的表達式]（http://stackoverflow.com/questions/10732923/css-nth-child-formula-to-select-every-7th-element- and-the-5th-element/10732981＃10732981）作爲您的第一個。 – BoltClock

@BoltClock哈，聽起來像一個確切的副本。感謝您指出了這一點。 –

好吧除了在第26個元素停下來... – BoltClock

嘗試

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

來源

2016-01-27 14:39:22 Frank

歡迎來到這個網站，弗蘭克，感謝您的貢獻！ –

我怎樣才能使這成爲一個動態的：第十二個孩子的CSS選擇器

回答

相關問題