CSS可以检测一个元素的子元素的数量吗?

我可能是在回答我自己的问题，但我非常好奇。

我知道CSS可以选择父容器的各个子容器，但是如果父容器有一定数量的子容器，是否支持对子容器进行样式化。

例如

container:children(8) {
  // style the parent this way if there are 8 children
}

我知道这听起来很奇怪，但我的经理让我去看看，我自己什么都没有发现，所以我决定在结束搜索之前转向so。

当前回答

注意:这个解决方案将返回特定长度的集合的子元素，而不是您要求的父元素。希望它仍然有用。

Andre Luis想出了一个方法:http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/不幸的是，它只适用于IE9及以上版本。

本质上，您将:n -child()与其他处理元素位置的伪类结合在一起。这种方法允许您从具有特定长度的元素集中指定元素。

例如:n -child(1):n -last-child(3)匹配集合中的第一个元素，同时也是集合末尾的第3个元素。这做了两件事:保证集合只有三个元素，并且我们有三个元素中的第一个。要指定三个元素集中的第二个元素，我们可以使用:n -child(2):n -last-child(2)。

例1 -如果set有三个元素，则选择所有列表元素:

li:nth-child(1):nth-last-child(3),
li:nth-child(2):nth-last-child(2),
li:nth-child(3):nth-last-child(1) {
    width: 33.3333%;
}

例1来自Lea Verou的替代方案:

li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

例2 -目标set的最后一个元素有三个list元素:

li:nth-child(3):last-child {
    /* I'm the last of three */
}

例2替代方案:

li:nth-child(3):nth-last-child(1) {
    /* I'm the last of three */
}

例3 - set的第二个目标元素，包含四个list元素:

li:nth-child(2):nth-last-child(3) {
    /* I'm the second of four */
}

2012-07-19 19:26:57

其他回答

现在我们可以使用:has()选择器来标识条目的数量，并将样式应用到容器中

.container { height: 50px; margin: 10px; } .container:not(:has(*)) { /* 0 elements */ background: yellow; } .container:has(> :last-child:nth-child(1)) { /* 1 element */ background: red; } .container:has(> :last-child:nth-child(2)) { /* 2 elements */ background: blue; } .container:has(> :last-child:nth-child(3)) { /* 3 elements */ background: green; } /* For N elements .container:has(> :last-child:nth-child(N)) { background: red; } */ <div class="container"> </div> <div class="container"> <div></div> </div> <div class="container"> <div></div> <div></div> </div> <div class="container"> <div></div> <div></div> <div></div> </div>

2022-10-10 14:42:24

根据Matt的解决方案，我使用了以下Compass/SCSS实现。

@for $i from 1 through 20 {
    li:first-child:nth-last-child( #{$i} ),
    li:first-child:nth-last-child( #{$i} ) ~ li {
      width: calc(100% / #{$i} - 10px);
    }
  }

这允许您快速扩展项目的数量。

2015-08-10 14:57:59

你可以像这样使用:has选择器:

.parent-element:has(:nth-child(8))

它选择子元素号为8的.parent-element类的元素。如果子数字8不存在，规则将不被应用。

不幸的是:has在firefox中默认不支持。您仍然可以使用它，并为firefox支持添加额外的棘手规则。

2022-12-22 13:37:37

如果你正在寻找一种方法来样式所有元素，如果超过N个存在(例如2个或更多):

李:first-child nth-last-child (n + 2), 李:第一个孩子:nth-last-child(n+2) ~ li background-color:红; 的 <德> < li >第一< / li > < /德> <德> < li >第一< / li > < li >第二< / li > < /德> <德> < li >第一< / li > < li >第二< / li > < li >第三< / li > < /德>

2021-07-07 18:47:56