CSS可以检测元素包含的子级数目吗？

小编典典

CSS可以检测元素包含的子级数目吗？

css

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

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

例如

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

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

阅读 386

2020-05-16

共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%;
}

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

这种技术值得称赞的是AndréLuís（已发现）和Lea Verou（已提炼）。

2020-05-16