編號的CSS類上的Calc（）？

Question

說我有以下HTML：

<div class="bigSquare"> 
    <div class="square0 square"></div> 
    <div class="square1 square"></div> 
    <div class="square2 square"></div> 
    <div class="square3 square"></div> 
</div> 

下面CSS：

.bigSquare { 
    height: 100px; 
    width: 100px; 
} 

.square { 
    position: absolute; 
    height: 40px; 
    width: 40px; 
} 

.square0 { 
    left: 5px; 
    top: 5px 
} 

.square1 { 
    left: 55px; 
    top: 5px 
} 

.square2 { 
    left: 5px; 
    top: 55px 
} 

.square3 { 
    left: 55px; 
    top: 55px 
} 

是否有可能降低，看起來像這樣的square0，square1，square2和square3 CSS下來的東西？

.square[n] { 
    left: calc((n % 2) * 50px + 5px); 
    top: calc((n/2) * 50px + 5px); 
} 

我意識到％運算符不合法，但也許有一個等價的。

Answer 1

不完全是語法，你預期的，但你可以使用ATTR：

<div class="square" rel="1"></div> 
<div class="square" rel="2"></div> 

.square{ 
    left:calc(attr(rel)/2 * 50px + 5px); 
    top: calc(attr(rel) mod 2 * 50px + 5px); 
} 

這可能做的伎倆。