CSS選取奇數/偶數改變背景色

之前曾經在php的書上看過用php判斷tr是不是整除於2，再另外替tr加class的方式，去產生兩色相間的變化，因為php的書不會特地介紹到css的技巧，所以那時候也沒發現，後來才知道原來已CSS控制奇數/偶數的樣式即可。

這是table標籤結構 :

<table>
  <tr><th>ID</th><th>BOOK NAME</th><th>AUTHOR</th><th>DATE</th></th></tr>
  <tr>
    <td>5112</td><td>Pro Javascript</td><td>TEST</td><td>YYYY-MM-DD</td>
  </tr>
  <tr>
    <td>5113</td><td>jQuery-and-HTML5</td><td>TEST</td><td>YYYY-MM-DD</td>
  </tr>
  <tr>
    <td>5114</td><td>MongoDB</td><td>TEST</td><td>YYYY-MM-DD</td>
  </tr>
  <tr>
    <td>5115</td><td>MySQL</td><td>TEST</td><td>YYYY-MM-DD</td>
  </tr>
</table>

方法一 :

tr:nth-child(odd){
  background:pink;
}

tr:nth-child(even){
  background:#EDF1CB;
}

方法二 :

tr:nth-of-type(odd){
  background:pink;
}

tr:nth-of-type(even){
  background:#EDF1CB;
}

方法二的

:nth-of-type( { number expression | odd | even } ) {
declaration block
}
IE8以下不支援。

Plz Refer:

http://reference.sitepoint.com/css/pseudoclass-nthoftype

http://www.w3schools.com/cssref/sel_nth-of-type.asp