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

Question

假设我们有一个这样的 css 列表

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

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

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

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/