如何获得css或sass中的子div数

Question

假设我们有一个css列表

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

子项是基于迭代器生成的。如何在css或scss中获得父项内的子项数。

因此，我可以根据第n个孩子动态修改padding等css属性。

Answer 1

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

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

@for $i from 1 through 8 {

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

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

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

Answer 2

使用直接子选择器>并添加第n个模式，例如：

 p:nth-child(2) // get every 2nd child
 p:nth-child(3n+0) // elements whose index is a multiple of 3

Answer 3

按照本文中的说明使用第n个孩子 https://alistapart.com/article/quantity-queries-for-css