css - CSS 可以检测一个元素的子元素数量吗？

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

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

例如

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

我知道这听起来很奇怪，但我的经理让我检查一下，我自己没有发现任何东西，所以我决定在结束搜索之前求助于 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%;
}

诀窍是在第一个 child 也是倒数第 n 个 child 时选择第一个 child 。这实际上是根据 sibling 的数量进行选择。

这项技术归功于 André Luís(发现)和 Lea Verou(完善)。

您不就是喜欢 CSS3 吗？ 😄

CodePen 示例: