通过base px * n第n个元素缩进每个第n个元素

Question

可以说我有n个div。

<div class="indent">1</div> 
<div class="indent">2</div> 
<div class="indent">n</div> 

我要缩进的第一个10px的，另一本由10px的多个等..这怎么能与CSS3（或更少）来完成？

.indent { 
    padding-left: 10px; 
} 

.indent :nth-of-type(2) { 
    padding-left: 20px; 
} 

.indent :nth-of-type(3) { 
    padding-left: 30px; 
} 

我想使上面的代码为1或两个衬垫..

Answer 1

检查this出来。

它描述了如何在Less中创建循环。

对于你的问题，这应该是诀窍，假设你知道你有多少个div。

.loop(@counter) when (@counter > 0) { 
    .loop((@counter - 1)); // next iteration 
    .indent :nth-of-type(@{counter}) { 
     padding-left: unit((10 * @counter), px); 
    } 
} .loop(3); 

这里，这段代码会产生3次迭代。 请注意，迭代是根据您要求的迭代次数1生成的。在此处，您将按照相反的顺序提问。