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

Posted 2023-03-06

【中文标题】如何在css或sass中获取子div的数量

【英文标题】：How to get the number of children div in css or sass

【发布时间】：2018-07-26 05:15:12

【问题描述】：

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

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

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

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

【问题讨论】：

你是不是要检查这个ul有没有孩子？？？

我认为你不能在 CSS 中“获得”任何东西。你定义规则，规则适用。这只是一种方式。

@fcalderan 我正在寻找计数来计算子级的数量以动态更改 css 属性，例如填充子类。

你可以用 sass 函数和循环来做到这一点

@collision 你介意详细说明一个具体的例子来编辑你的问题吗？在什么条件下应该改变什么？

【参考方案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？）。

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

【讨论】：

这从 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