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

【问题标题】：How to get the number of children div in css or sass如何在css或sass中获取子div的数量
【发布时间】：2026-01-23 12:00:01
【问题描述】：

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

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

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

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

【问题讨论】：

你是不是要检查这个ul有没有孩子？？？
我认为你不能在 CSS 中“获得”任何东西。你定义规则，规则适用。这只是一种方式。
@fcalderan 我正在寻找计数来计算子级的数量以动态更改 css 属性，例如填充子类。
你可以用 sass 函数和循环来做到这一点
@collision 你介意详细说明一个具体的例子来编辑你的问题吗？在什么条件下应该改变什么？

标签： css sass

【解决方案1】：

如果你给 .child 元素添加一个带编号的类名，比如 child1、child2 等等……那么你可以用这种方式循环集合：

$maxElements: 100;
@for $i from 1 to $maxElements {
  .child#{$i} {
    //..do something to child element, eg: 
    color: darkorange !important;
  }
}

这不是最好的方法，因为您必须设置最大值，并且会发生一些空的处理，但它似乎有效。

【讨论】：

【解决方案2】：

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

但是，使用 SASS，您可以自动为任意数量的孩子生成 CSS：

@for $i from 1 through 8 {

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

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

【讨论】：

这从 1 到 8 迭代。如果我要得到这个。问题是你不知道某个时间点的孩子数量。并且可能大于或小于 8
您将无法通过 CSS 获取号码。您可以将数字 8 更改为您认为安全的赌注。否则，您必须让我们 JS 为每个 li 添加一个内联填充
你会给每个孩子一个特定的填充，或者你如何分配它会有某种模式？

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

【讨论】：