根据元素在组内的位置设置元素的样式

Question

我正在尝试创建一组盒子。我想尝试看看我是否可以根据它在组内的位置来设置盒子的大小。

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

由于CSS已经能够在组中找到元素的位置，因此可以将此定位用作大小的输入。

例如

之类的东西

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

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

Answer 1

在CSS选择器等级3中，没有用于定位元素的方法，使用与该元素在组内的位置相对应的变量，为该元素定制样式。

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

然而，使用Sass，CSS预处理器可以在calc()函数中使用变量。

参考文献：

• CSS Selectors Level 3
• 8.1. Mathematical Expressions: calc()
• Sass Variable in CSS calc() function
• Sass Variables

Answer 2

你不能在纯css中这样做，但你可以用scss。 例如：

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

您可以使用代码here。