请注意,在 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%;
}
诀窍是在第一个孩子也是倒数第二个孩子时选择第一个孩子。这有效地根据兄弟姐妹的数量进行选择。