好用的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


留言

這個網誌中的熱門文章

Xoops免費佈景:neilambilight2.5正式版釋出-佈景設計開發:徐嘉裕Neil hsu

Xoops免費佈景:neilambilight2.4正式版釋出-佈景設計開發:徐嘉裕 Neil hsu

在CentOS7上安裝XAMPP並設定允許外部連線phpmyadmin的方法-教學撰寫:徐嘉裕Neil hsu