大佬教程收集整理的这篇文章主要介绍了html – 更少mixin或选择器根据兄弟索引改变位置?,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
它们每个都有几百个像素高,但是我希望它们彼此重叠,这样后面的那些只能“偷看”在前面几个像素之上.我能想到的最简单的方法是使用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一定的高度(而不是它的全高)?
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; }
以上是大佬教程为你收集整理的html – 更少mixin或选择器根据兄弟索引改变位置?全部内容,希望文章能够帮你解决html – 更少mixin或选择器根据兄弟索引改变位置?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。