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

我要冲啦个人网站建设2023-10-31web前端

请注意,在 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%;
}

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

文章关键词
CSS
检测元素的子元素数量