好用的CSS3->nth-child()選擇器(可以做奇偶數判斷)-教學撰寫:徐嘉裕Neil hsu

之前如果要做像這樣奇偶數的特效，通常都是透過PHP程式判斷迴圈奇偶數之後帶出odd及even數值傳值到樣板輸出成id，再定義CSS樣式，當然也能用SMARTY內建函數 class="<{cycle values="odd,even"}>來做出判斷。

不果現在有更快的方法，連程式都不用寫了直接前端CSS就能做出來了，就是用nth-child()選擇器來判斷奇偶數，範例如下：

//HTML結構

<div id='boxdiv'>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
<li>內容內容內容內容內容內容內容內容內容內容內容</li>
</div>

//CSS語法

#boxdiv li:nth-child(odd)
{
background:#ff0000;
}
#boxdiv li:nth-child(even)
{
background:#0000ff;
}

//輸出結果

這樣自動就能判斷奇偶數值並顯示CSS樣式，簡單好用又節省效能，有需要的朋友可以參考看看!!


教學撰寫：徐嘉裕 Neil hsu