html - 有没有办法在 :nth-child(n)? 中使用 "n"值

Question

我想创建折叠效果。

Fiddle

有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，则会产生较大的 CSS 文件，这意味着加载时间会更长。