根據組中的位置設置元素的樣式

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玩。