如何使用LESS为每n个元素添加不同的CSS样式(取决于n) [英] How to add different CSS style to every nth element, depending on n using LESS
本文介绍了如何使用LESS为每n个元素添加不同的CSS样式(取决于n)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试向div中的后续元素添加不同的填充.我的DOM看起来很简单.
I am trying to add different padding to subsequent elements in a div. My DOM looks pretty simple.
<div class="parent">
<div>0</div>
<div>15</div>
<div>30</div>
...
</div>
因此,我希望第一个元素的填充为0,第二个元素为15,第三个为30,依此类推. 使用 LESS ,我该如何进行这项工作? 我已经尝试过:
So I would like for my first element to have 0 padding, my second 15, third 30 etc. Using LESS, how could I make this work? I have tried:
.parent div:nth-of-type(n) {
padding-left: n*15px;
}
谢谢!
推荐答案
使用较少(但必须设置元素数):
Using less(but you have to set the num of elements):
.parent (@indexstart,@index) when (@indexstart < @index ){
div:nth-child(@{indexstart}){
padding-left: (@indexstart - 1) * 15px;
}
.parent (@indexstart + 1,@index);
}
.parent (1,4);
这篇关于如何使用LESS为每n个元素添加不同的CSS样式(取决于n)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文