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

Posted 2023-03-06

【中文标题】根据元素在组中的位置设置元素样式

【英文标题】：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() 函数中使用变量是可能的。

参考资料：

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

【参考方案2】：

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

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

您可以使用代码here。

【讨论】：

谢谢，scss 肯定是要走的路