如何获得CSS或SASS中的孩子div数量 [英] How to get the number of children div in css or sass

问题描述

假设我们有一个CSS列表

Assuming we have a css list as such

<ul class="parent">
  <li class="child"></li>
</ul>

子项是根据迭代器生成的。

with the child items being generated based from an iterator. How can you get the number of children within parent in either css or scss.

所以我可以动态修改css属性，例如 padding 基于第n个孩子。

So I can dynamically modify css attributes like padding based on the nth child.

推荐答案

CSS和SASS都不会告诉您列表中有多少个项目。为此，您需要JS。

Neither CSS nor SASS will tell you how many items there are in a list. You'll need JS for that.

但是，使用SASS可以自动为任意多个孩子生成CSS：

However, with SASS you can generate the CSS for as many children as you want automatically:

@for $i from 1 through 8 {

    li:nth-child(#{$i}) {
        padding-left: $i * 20px
    }
}

将数字8更改为您认为可以拥有的任何数字涵盖（10？100？1000？）。

Change the number 8 to any number you think will have you covered (10? 100? 1000?).

更多信息： http://clubmate.fi/for-while-and-each-loops-in-sass/

这篇关于如何获得CSS或SASS中的孩子div数量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！