说我有以下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);
}


我意识到%运算符不合法,但也许有一个等效的名称。

最佳答案

不完全符合您期望的语法,但是您可以使用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);
}


这可以解决问题。

关于html - Calc()在一个编号的CSS类上?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/42459175/

10-09 15:34
查看更多