我正在尝试根据他们的兄弟姐妹来调整几个兄弟div的位置.目前,他们都是绝对的,但这并不是一成不变的.
它们每个都有几百个像素高,但是我希望它们彼此重叠,这样后面的那些只能“偷看”在前面几个像素之上.我能想到的最简单的方法是使用nth-of-type的Less mixin,而不是仅将规则应用于匹配的一个索引,而是将索引传递给mixin.基本上,我想要这个：
&:nth-of-type(@n) {
top: @n * 20px;
}
编辑：我目前在做什么：
&:nth-of-type(1) {
.card_offset(1);
}
&:nth-of-type(2) {
.card_offset(2);
}
&:nth-of-type(3) {
.card_offset(3);
}
&:nth-of-type(4) {
.card_offset(4);
}
显然这不是最理想的.在Less中有更好的方法吗？
或者,是否存在类似’layout-height’的CSS字段,它会在布局中给div一定的高度(而不是它的全高)？
解决方法
假设你事先知道元素的数量(或者以某种方式重新计算你的css),那么基本上你有什么工作,如果
put into a loop structure我最初发现
here on stack overflow.
LESS代码
.loop(@index) when (@index > 0) {
//set top amount
&:nth-of-type(@{index}) { //NOTE: 1.3.3 and under is just @index,not @{index}
top: @index * 20px;
}
// next iteration
.loop(@index - 1);
}
// end the loop when index is 0
.loop(0) {}
.yourElem {
@n: 6; //num of elements (could skip this and just put number in)
.loop(@n);
}
.yourElem:nth-of-type(6) {
top: 120px;
}
.yourElem:nth-of-type(5) {
top: 100px;
}
.yourElem:nth-of-type(4) {
top: 80px;
}
.yourElem:nth-of-type(3) {
top: 60px;
}
.yourElem:nth-of-type(2) {
top: 40px;
}
.yourElem:nth-of-type(1) {
top: 20px;
}
