css - 如何让第 n 个 child 包含一个范围(例如 0-19)

Question

我有一些 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？

有什么想法吗？

Answer 1

因为您已经使用了 CSS 变量，所以您可以将数字更改为变量 (--counter)，并将其设置在 div 元素上。现在您可以为所有 div 使用一行。

示例(我简化了 CSS):

:root {
  --cameraSpeed: 3;
  --itemZ: 2;
}

div {
  transform: translateX(calc(var(--counter, 0) * 10px));
}

<div style="--counter: 0;">0</div>

<div style="--counter: 10;">10</div>

<div style="--counter: 19;">19</div>