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

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()可以在函数中使用变量。

参考：