有没有办法在 :nth-child(n) 中使用“n”值？

Question

我想创建一个折叠效果。

小提琴

有4张蓝卡，所以我创建了4个类来设置位置。我想让它更聪明，以防有超过 4 张卡。在 CSS 中，我尝试了这个。

.card:nth-child(n){
    position: absolute;
    left: calc(n*10)px;
    top: calc(n*10)px;
}

但是，它不起作用。有没有办法做到这一点？

Answer 1

CSS 不支持变量。您可以使用 Less/SASS 循环并将其定义为 n 到某个值，但这会多次输出几乎相同的 CSS。这是Codepen 的例子。

支持最多 10 张卡的 SCSS 代码：

$n: 10;

@for $i from 1 through $n {
  .card:nth-child(#{$i}) {
    position: absolute;
    left: 10px * $i;
    top: 10px * $i;
  }
}

但你确定你的方法是正确的吗？也许您想退后一步，寻找不同的方法。因为这仍然不能动态扩展，所以您必须预测 n 或将n限制为某个值。如果您选择较大的n，则会产生较大的 CSS 文件，这相当于较长的加载时间。

Answer 2

要将计算保留在 CSS 中，您可以使用 CSS 变量：calc( var(--n) * 10px );. 您仍然需要--n通过 JS 手动定义或在 HTML 中预定义，但这种方式感觉更具声明性，因为 JS 代码中没有实际的样式：

function add() {
  var parent = document.querySelector('.container');
  var child = document.createElement('div');
  child.classList.add('child');
  child.style.setProperty('--n', parent.children.length);
  parent.appendChild(child);
}

.child {
  position: absolute;
  left: calc( var(--n) * 30px + 100px );
  top: calc( var(--n) * 30px );
  background-color: red;
  width: 30px;
  height: 30px;
}

<button onclick="add()">Add more</button>
<div class="container">
  <div class="child" style="--n: 0;"></div>
  <div class="child" style="--n: 1;"></div>
  <div class="child" style="--n: 2;"></div>
</div>

浏览器支持相当不错：现在每个主流浏览器都有它。

Answer 3

您可以尝试使用 CSS 自定义属性和一个小片段：

:root {
  --index: 0;
}

*:nth-child(1) {
  --index: 0;
}

*:nth-child(2) {
  --index: 1;
}

*:nth-child(3) {
  --index: 2;
}

您可以针对您可能期望拥有的孩子数量声明一次，然后像这样使用：

.child {
  position: absolute;
  top: calc(100px * var(--index));
}

演示： https: //codepen.io/waterplea/pen/KKNqqQy