通過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生成的。在此處，您將按照相反的順序提問。