如何在css或sass中获取子div的数量

Question

假设我们有一个 css 列表

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

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

所以我可以像padding基于第 n 个孩子一样动态修改 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？）。