CSS 可以检测元素的子元素数量吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8720931/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can CSS detect the number of children an element has?
提问by Brodie
I'm probably answering my own question, but I'm extremely curious.
我可能正在回答我自己的问题，但我非常好奇。
I know that CSS can select individual children of a parent, but is there support to style the children of a container, if its parent has a certain amount of children.
我知道 CSS 可以选择父级的单个子级，但是如果父级有一定数量的子级，是否支持为容器的子级设置样式。
for example
例如
container:children(8) .child {
//style the children this way if there are 8 children
}
I know it sounds weird, but my manager asked me to check it out, haven't found anything on my own so I decided to turn to SO before ending the search.
我知道这听起来很奇怪，但我的经理让我检查一下，我自己没有找到任何东西，所以我决定在结束搜索之前转向 SO。
回答by Matthemattics
Clarification:
澄清：
Because of a previous phrasing in the original question, a few SO citizens have raised concerns that this answer could be misleading. Note that, in CSS3, styles cannot be applied to a parent nodebased on the number of children it has. However, styles canbe applied to the children nodes based on the number of siblingsthey have.
由于原始问题中的先前措辞，一些 SO 公民提出了该答案可能具有误导性的担忧。请注意，在 CSS3 中，不能根据父节点的子节点数量将样式应用于父节点。但是，样式可以根据它们拥有的兄弟节点的数量应用于子节点。
Original answer:
原答案：
Incredibly, this is now possible purely in 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%;
}
The trick is to select the first child when it's also the nth-from-the-last child. This effectively selects based on the number of siblings.
诀窍是在第一个孩子也是最后一个孩子的第 n 个孩子时选择第一个孩子。这有效地根据兄弟姐妹的数量进行选择。
Credit for this technique goes to André Luís (discovered) & Lea Verou (refined).
这项技术归功于 André Luís（发现）和 Lea Verou（精制）。
Don't you just love CSS3?
你不只是喜欢 CSS3 吗？
CodePen Example:
代码笔示例：
Sources:
资料来源：
回答by derekerdmann
No. Well, not really. There are a couple of selectors that can get you somewhat close, but probably won't work in your example and don't have the best browser compatibility.
不。嗯，不是真的。有几个选择器可以让您有点接近，但可能无法在您的示例中工作并且没有最佳的浏览器兼容性。
:only-child
:only-child
The :only-childis one of the few true counting selectors in the sense that it's only applied when there is one child of the element's parent. Using your idealized example, it acts like children(1)probably would.
这:only-child是少数真正的计数选择器之一，因为它仅在元素的父元素有一个子元素时才应用。使用您的理想化示例，它的行为children(1)可能会如此。
:nth-child
:nth-child
The :nth-childselector might actually get you where you want to go depending on what you're really looking to do. If you want to style all elements if there are 8 children, you're out of luck. If, however, you want to apply styles to the 8th and later elements, try this:
在:nth-child这里你要根据你真正希望做的去选择实际上可能得到你。如果您想为有 8 个孩子的所有元素设置样式，那您就不走运了。但是，如果您想将样式应用于第 8 个及以后的元素，请尝试以下操作：
p:nth-child( n + 8 ){
/* add styles to make it pretty */
}
Unfortunately, these probably aren't the solutions you're looking for. In the end, you'll probably need to use some Javascript wizardry to apply the styles based on the count - even if you were to use one of these, you'd need to have a hard look at browser compatibility before going with a pure CSS solution.
不幸的是，这些可能不是您正在寻找的解决方案。最后，您可能需要使用一些 Javascript 魔法来根据计数应用样式 - 即使您要使用其中之一，在使用纯浏览器之前，您也需要仔细研究浏览器兼容性CSS 解决方案。
W3 CSS3 Spec on pseudo-classes
EDITI read your question a little differently - there are a couple other ways to style the parent, not the children. Let me throw a few other selectors your way:
编辑我读你的问题有点不同 - 还有其他几种方式来设计parent，而不是 children 。让我以您的方式抛出其他一些选择器：
:emptyand :not
:empty和 :not
This styles elements that have no children. Not that useful on its own, but when paired with the :notselector, you can style only the elements that have children:
这为没有子元素的元素设置样式。本身不是很有用，但是当与:not选择器配对时，您只能设置具有子元素的元素的样式：
div:not(:empty) {
/* We know it has stuff in it! */
}
You can't count how many children are available with pure CSS here, but it is another interesting selector that lets you do cool things.
你无法计算这里有多少孩子可以使用纯 CSS，但它是另一个有趣的选择器，可以让你做很酷的事情。
回答by ifugu
NOTE: This solution will return the children of sets of certain lengths, not the parent element as you have asked. Hopefully, it's still useful.
注意：此解决方案将返回特定长度集合的子元素，而不是您所要求的父元素。希望它仍然有用。
Andre Luis came up with a method: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/Unfortunately, it only works in IE9 and above.
Andre Luis 想出了一个方法：http: //lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/不幸的是，它只适用于 IE9 及更高版本。
Essentially, you combine :nth-child() with other pseudo classes that deal with the position of an element. This approach allows you to specify elements from sets of elements with specific lengths.
本质上，您将 :nth-child() 与其他处理元素位置的伪类结合起来。这种方法允许您从具有特定长度的元素集中指定元素。
For instance :nth-child(1):nth-last-child(3)matches the first element in a set while also being the 3rd element from the end of the set. This does two things: guarantees that the set only has three elements and that we have the first of the three. To specify the second element of the three element set, we'd use :nth-child(2):nth-last-child(2).
例如，:nth-child(1):nth-last-child(3)匹配集合中的第一个元素，同时也是集合末尾的第三个元素。这做了两件事：保证集合只有三个元素，并且我们拥有三个元素中的第一个。要指定三元素集中的第二个元素，我们将使用:nth-child(2):nth-last-child(2).
Example 1 - Select all list elements if set has three elements:
示例 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%;
}
Example 1 alternativefrom Lea Verou:
Lea Verou 的示例 1 替代方案：
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
width: 33.3333%;
}
Example 2 - target last element of set with three list elements:
示例 2 - 以三个列表元素为目标集合的最后一个元素：
li:nth-child(3):last-child {
/* I'm the last of three */
}
Example 2 alternative:
示例 2 替代方案：
li:nth-child(3):nth-last-child(1) {
/* I'm the last of three */
}
Example 3 - target second element of set with four list elements:
示例 3 - 以四个列表元素为目标集合的第二个元素：
li:nth-child(2):nth-last-child(3) {
/* I'm the second of four */
}
回答by mwtidd
Working off of Matt's solution, I used the following Compass/SCSS implementation.
使用 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);
}
}
This allows you to quickly expand the number of items.
这使您可以快速扩展项目数量。
回答by AlanFoster
yes we can do this using nth-child like so
是的，我们可以像这样使用 nth-child 来做到这一点
div:nth-child(n + 8) {
background: red;
}
This will make the 8th div child onwards become red. Hope this helps...
这将使第 8 个 div 子项变为红色。希望这可以帮助...
Also, if someone ever says "hey, they can't be done with styled using css, use JS!!!" doubt them immediately. CSS is extremely flexible nowadays
此外，如果有人说“嘿，他们不能使用 css 样式来完成，请使用 JS ！！！” 立即怀疑他们。CSS 现在非常灵活
Example :: http://jsfiddle.net/uWrLE/1/
示例 :: http://jsfiddle.net/uWrLE/1/
In the example the first 7 children are blue, then 8 onwards are red...
在这个例子中，前 7 个孩子是蓝色的，然后 8 个孩子是红色的......
回答by Juan Sebastian Contreras Aceve
If you are going to do it in pure CSS (using scss) but you have different elements/classes inside the same parent class you can use this version!!
如果您打算在纯 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});
}
}
回答by Niet the Dark Absol
No, there is nothing like this in CSS. You can, however, use JavaScript to calculate the number of children and apply styles.
不，CSS 中没有这样的东西。但是，您可以使用 JavaScript 来计算子项的数量并应用样式。
