CSS根據子元素個數不同定義樣式

　　近日面試，遇見了一個這樣的問題，不會，便記下來。

　　問題：如何根據子元素個數的不同定義不同的樣式？

　　代碼：HTML

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

　　CSS:

/* one item */
li:first-child:nth-last-child(1) {
    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%;
}

　　結果：

　　解釋：

　　li:first-child 選擇作為第一個子元素的li

　　:nth-last-child(n) 選擇倒數第n個元素

　　~ li 選擇之后的兄弟li元素

　　所以：li:first-child:nth-last-child(3) ~ li，選擇的是：作為第一個，並且是倒數第三個的元素（保證了他們的父元素具有3個子元素）之后的兄弟li元素。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　完結。
參考鏈接：http://lightcss.com/styling-children-based-on-their-number-with-css3/#toc-3