使用nth-child作爲CSS變量

有沒有一些方法（沒有JavaScript）使nth-child影響CSS？使用nth-child作爲CSS變量

例如，當我加載10張圖片時，我會淡入不透明度，並給每張圖片一個N秒的動畫延遲。

我可以用nth-child（1）{}，nth-child（2）{}等手動執行此操作，但顯然很麻煩並且元素數量有限。

我也嘗試過循環，雖然這對於（10n + 1）來說效果很好，但如果我試圖從an + b公式（100n + 10n）中跑偏，它會中斷。另外我懷疑它會在每10秒增加1秒和每10秒增加10秒，因爲其中一個會覆蓋另一個。

這個問題與this one from 2011類似，它仍然是開放的，但很多時間已經過去了，也許現在有更好的答案。

2017-08-04 PixelSnader

如果值循環，則可以使用第n個孩子在CSS中對一個循環（1n + 0 ... 10n + 0等）進行硬編碼，然後重複。不知道這是否會滿足您的問題，所以只發布評論。 https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child – mccainz

你想爲每個孩子添加不同的延遲，是嗎？ –

我很驚訝，這不是一個重複（時間儘管）。沒關係，我回答。 – BoltClock

CSS不支持使用n的當前值，或目前被匹配子元素的索引，從:nth-child()表達式作爲變量，無論是在calc()表達式也不var()表達式，也不是一個屬性值的任何其它部分。

您可以得到的最接近的結果是使用的支持在選擇器內插入變量的預處理器自動執行手動過程。如果您知道需要事先構建的規則的數量，那麼這將起作用，但只有這樣。

來源

2017-08-05 10:01:48 BoltClock

使用nth-child作爲CSS變量

回答

相關問題