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来计算孩子的数量并应用样式。