Calc（）在编号的CSS类上？

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);
} 

这可能会成功。