CSS可以检测一个元素有多less个子元素？
我可能回答我自己的问题，但我非常好奇。
我知道CSS可以select一个父类的单个子元素，但是如果其父元素有一定的子元素，那么是否支持样式化一个容器的子元素。
例如
container:children(8) .child { //style the children this way if there are 8 children } 我知道这听起来很奇怪，但是我的经理让我检查一下，没有发现任何东西，所以我决定在search结束之前转向SO。
澄清：
由于原来的问题之前的措辞，一些SO公民已经提出担心，这个答案可能是误导。 请注意，在CSS3中，根据子节点的数量不能将样式应用于父节点 。 但是，样式可以根据其所拥有的兄弟的数量应用于子节点。
原始答案：
令人难以置信的是，现在纯粹在CSS3中是可能的。
/* one item */ li:first-child:nth-last-child(1) { /* -or- li:only-child { */ width: 100%; } /* two items */ li:first-child:nth-last-child(2), li:first-child:nth-last-child(2) ~ li { width: 50%; } /* three items */ li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; } /* four items */ li:first-child:nth-last-child(4), li:first-child:nth-last-child(4) ~ li { width: 25%; }
诀窍是select第一个孩子的时候也是第n个孩子。 这有效地select了基于兄弟姐妹的数量。
信用这个技术去安德烈路易斯（发现）和利亚维尔（精炼）。
你不喜欢CSS3吗？ 😄
CodePen例子：
资料来源：
不，不是。 有几个select器可以让你有点接近，但可能不会在你的例子中工作，并没有最好的浏览器兼容性。
:only-child
:only-child是less数真正的计数select者之一，因为只有当元素的父亲有一个孩子时才应用它。 用你理想化的例子，它就像children(1)一样。
:nth-child
:nth-childselect器实际上可能会让你想要去的地方取决于你真正想做的事情。 如果你想要所有的元素，如果有8个孩子，你运气不好。 但是，如果您想要将样式应用于第8个及更高版本的元素，请尝试以下操作：
p:nth-child( n + 8 ){ /* add styles to make it pretty */ }
不幸的是，这些可能不是你正在寻找的解决scheme。 最后，您可能需要使用一些Javascript wizardry来应用基于计数的样式 – 即使您要使用其中的一种，在使用纯文本之前，您需要仔细阅读浏览器的兼容性CSS解决scheme。
关于伪类的W3 CSS3 Spec
编辑我读你的问题有点不同 – 有一些其他的方式来风格的父母 ，而不是孩子。 让我按照你的方式抛出一些其他的select器：
:empty和:not
这样设置没有孩子的元素。 没有那么有用，但是在与:notselect器配对时，只能设置具有子级的元素：
div:not(:empty) { /* We know it has stuff in it! */ }
你不能指望有多less个孩子可以使用纯CSS，但是它是另一个有趣的select，可以让你做很酷的事情。
注：这个解决scheme将返回一定长度的子集，而不是你所要求的父元素。 希望它仍然有用。
安德烈·路易斯提出了一个方法： http : //lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/不幸的是，它只适用于IE9及以上。
本质上，你将nnth-child（）与其他处理元素位置的伪类结合起来。 这种方法允许您从具有特定长度的元素集合中指定元素。
例如:nth-child(1):nth-last-child(3)匹配集合中的第一个元素，同时也是集合的结尾的第三个元素。 这样做有两个方面：保证集合只有三个元素，而我们有三个元素中的第一个元素。 要指定三个元素集的第二个元素，我们使用:nth-child(2):nth-last-child(2) 。
示例1 – 如果set包含三个元素，则select所有列表元素：
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%; }
来自Lea Verou的示例1替代scheme ：
li:first-child:nth-last-child(3), li:first-child:nth-last-child(3) ~ li { width: 33.3333%; }
示例2 – 使用三个列表元素指定集合的最后一个元素：
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 – 以四个列表元素为目标的第二个元素：
li:nth-child(2):nth-last-child(3) { /* I'm the second of four */ }
通过Matt的解决scheme，我使用了以下的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); } }
这使您可以快速扩展项目的数量。
是的，我们可以像这样使用第n个孩子来做到这一点
div:nth-child(n + 8) { background: red; }
这将使第8个div div的孩子变红。 希望这可以帮助…
此外，如果有人曾经说过“嘿，他们不能用CSS来做风格，使用JS !!!” 马上怀疑他们。 现在CSS非常灵活
示例:: http://jsfiddle.net/uWrLE/1/
在这个例子中，前7个孩子是蓝色的，然后8个孩子是红色的…
如果你打算使用纯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}); } }
不，CSS中没有这样的东西。 但是，您可以使用JavaScript来计算孩子的数量并应用样式。
