根据元素在组中的位置设置元素样式答案

【问题标题】：Style an element based on its position within a group根据元素在组中的位置设置元素样式
【发布时间】：2016-09-28 10:17:46
【问题描述】：

我正在尝试创建一组框。我想尝试看看是否可以根据其在组中的位置设置框的大小。

目前，如果我事先知道框的数量并使用 :nth-child() 选择器和适当的位置，这是可能的。

既然 CSS 已经有能力找到元素在组中的位置，是否可以使用这个位置作为尺寸的输入。

例如像

#boxes:nth-child() {
    height:calc(n * 10);
    width:calc(n * 10);
}

使用服务器端代码甚至 Javascript 可以轻松实现此目的，但只是想了解我们是否可以使用 CSS 来实现此目的，使用 calc 或任何其他功能。

【问题讨论】：

【解决方案1】：

在 CSS 选择器 Level 3 中，没有方法可以定位元素，然后使用与该元素在组中的位置相对应的变量，为该元素定制样式。

在 CSS 中，calc() 函数不允许使用变量。只有带有加法 (+)、减法 (-)、乘法 (*) 和除法 (/) 的数学表达式才能作为分量值。

然而，使用 Sass，一个 CSS 预处理器，在 calc() 函数中使用变量是可能的。

参考资料：

【讨论】：

【解决方案2】：

你不能在纯 css 中做到这一点，但你可以使用 scss。例如：

@for $i from 1 through 5 {
  .box:nth-child(#{$i}) {
     height: 50px * $i;
   }
}

您可以使用代码here。

【讨论】：