我可能是在回答我自己的问题，但我非常好奇。
我知道CSS可以选择父容器的各个子容器，但是如果父容器有一定数量的子容器，是否支持对子容器进行样式化。
例如
container:children(8) {
// style the parent this way if there are 8 children
}
我知道这听起来很奇怪，但我的经理让我去看看，我自己什么都没有发现，所以我决定在结束搜索之前转向so。
当前回答
如果你使用的是类似reactJS的东西，你可以简单地添加一个类，然后设置它的样式。
例如，假设你正在显示一个数组中的项。
app.jsx
<div className={`items-count-is-${items.length}`}>
{items.map(item => {
return <li>...</li>;
})}
</div>
例如:CSS: items-count-is-5{…}
其他回答
注意:这个解决方案将返回特定长度的集合的子元素，而不是您要求的父元素。希望它仍然有用。
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 */
}
如果你使用的是类似reactJS的东西，你可以简单地添加一个类，然后设置它的样式。
例如，假设你正在显示一个数组中的项。
app.jsx
<div className={`items-count-is-${items.length}`}>
{items.map(item => {
return <li>...</li>;
})}
</div>
例如:CSS: items-count-is-5{…}
是的，我们可以像这样使用n -child:
div:nth-child(n + 8) {
background: red;
}
这将使第8 div子div变成红色。希望这对你有所帮助……
同时，如果有人说“嘿，他们不能用css做样式，用JS!”立即怀疑他们。CSS现在非常灵活
.container div { 背景:蓝色; ｝ .container div:n -child(n + 8) { 背景:红色; ｝ < div class = "容器" > < div > div 1 < / div > < div > div 2 < / div > div < div > 3 < / div > < div > div 4 < / div > < div > div 5 < / div > < div > div 6 < / div > < div > div 7 < / div > < div > div 8 < / div > < div > div 9 < / div > < div > div 10 < / div > < div > div 11 < / div > < div > div 12 < / div > < / div >
在这个例子中，前7个孩子是蓝色的，之后的8个孩子是红色的……
(外部的例子)
现在我们可以使用: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>
如果你打算用纯CSS(使用scss)，但你在同一个父类中有不同的元素/类，你可以使用这个版本!!
&:first-of-type:nth-last-of-type(1) {
max-width: 100%;
}
@for $i from 2 through 10 {
&:first-of-type:nth-last-of-type(#{$i}),
&:first-of-type:nth-last-of-type(#{$i}) ~ & {
max-width: (100% / #{$i});
}
}
