CSS 可以检测元素的子元素数量吗？

Question

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

我知道 CSS 可以选择父级的单个子级，但是如果其父级有一定数量的子级，是否支持设置容器的子级样式。

例如

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

我知道这听起来很奇怪，但我的经理让我检查一下，我自己没有找到任何东西，所以我决定在结束搜索之前转向 SO。

原文由 Brodie 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

澄清：

由于原始问题中的先前措辞，一些 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%;
}

诀窍是在第一个孩子也是倒数第二个孩子时选择第一个孩子。这有效地根据兄弟姐妹的数量进行选择。

这项技术的功劳归功于 André Luís（发现）和 Lea Verou（精制）。

你不只是喜欢 CSS3 吗？ 😄

代码笔示例：

• https://codepen.io/mattlubner-the-decoder/pen/ExaQZQR

资料来源：

• http://andr3.net/blog/post/142 （安德烈·路易斯）
• http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/ (Lea Verou)

原文由 Matthemattics 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

不，不是真的。有几个选择器可以让您稍微接近，但可能不会在您的示例中工作并且没有最好的浏览器兼容性。

:only-child

:only-child 是为数不多的真正计数选择器之一，因为它仅在元素的父元素有一个子元素时应用。使用您的理想化示例，它的行为可能就像 children(1) 一样。

:nth-child

:nth-child 选择器实际上可能会让你到达你想去的地方，这取决于你真正想做什么。如果你想在有 8 个孩子的情况下设置所有元素的样式，那你就不走运了。但是，如果您想将样式应用于第 8 个及以后的元素，请尝试以下操作：

 p:nth-child( n + 8 ){
    /* add styles to make it pretty */
}

不幸的是，这些可能不是您正在寻找的解决方案。最后，您可能需要使用一些 Javascript 魔法来根据计数应用样式——即使您要使用其中之一，在使用纯CSS 解决方案。

W3 CSS3 伪类规范

编辑 我对你的问题的理解有点不同——还有其他几种方式来设计 父母 的风格，而不是孩子。让我按照您的方式抛出一些其他选择器：

:empty 和 :not

这个样式元素没有孩子。本身并没有多大用处，但是当与 :not 选择器配对时，您可以只设置有子元素的样式：

 div:not(:empty) {
    /* We know it has stuff in it! */
}

你无法计算这里有多少孩子可以使用纯 CSS，但它是另一个有趣的选择器，可以让你做很酷的事情。

原文由 derekerdmann 发布，翻译遵循 CC BY-SA 3.0 许可协议