Css 如何使第n个孩子包含一个范围（如0-19）

我有一些css代码，每个div子级都需要有一个属性

所以看起来是这样的。从0一直到19

div:nth-child(0) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 0 * -1px)); }
div:nth-child(1) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 1 * -1px)); }
div:nth-child(2) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 2 * -1px)); }
[...]
div:nth-child(17) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 17 * -1px)); }
div:nth-child(18) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 18 * -1px)); }
div:nth-child(19) { transform: translate3D(0%, 0%, calc(var(--itemZ) * var(--cameraSpeed) * 19 * -1px)); }

有没有办法让它只在一行中理解0-19

---

有什么想法吗？

因为您已经使用了CSS变量，所以可以将数字更改为变量（

--counter

），并在div元素上设置它。现在您可以为所有div设置一行

示例（我简化了CSS）：

：根目录{
--摄影速度：3；
--z:2；
}
div{
转换：translateX（计算值（var（--计数器，0）*10px））；
}

0
10
19

考虑使用SASS/LESSNo…没有。这将是一个函数，CSS实际上没有这些函数。