1. 首页
  2. 问题
  3. CSS 可以检测元素的子元素数量吗？
小编典典

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

all

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

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

例如

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

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


阅读 127

收藏
2022-03-28

共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é Luras（发现）和 Lea Verou（精制）。

你不只是喜欢 CSS3 吗？馃槃

代码笔示例：

资料来源：

2022-03-28