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

这可能会成功。