说我有以下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/