CSS3技巧--巧妙运用first-child和nth-last-child实现元素个数选择器

有时候可能我们会有这样一种需求

当div内有1个元素时应用某种样式，当div内有2个元素时又利用不同的样式。。。。以此类推。

但是CSS中除了only-child可以选择只有一个元素的情况，那么别的情况怎么办？

/* 一个元素时 */
li:first-child:nth-last-child(1) {
/* -或者可以使用- li:only-child { */
    width: 100%;
}

/* 两个元素时 */
li:first-child:nth-last-child(2),
li:first-child:nth-last-child(2) ~ li {
    width: 50%;
}

/* 三个元素时 */
li:first-child:nth-last-child(3),
li:first-child:nth-last-child(3) ~ li {
    width: 33.3333%;
}

/* 四个元素时 */
li:first-child:nth-last-child(4),
li:first-child:nth-last-child(4) ~ li {
    width: 25%;
}

/*以此类推*/

这个Trick的诀窍是当选择第一个节点时，它同时也是最后一个节点。这样就可以有效地根据节点的数量进行选择。

这项技术归功于AndréLuís（发现）和Lea Verou（精炼）。

资料来源：
http://andr3.net/blog/post/142 (AndréLuís）
http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/
(Lea Verou）