奇偶選擇器：使用odd和even屬性實現表格單雙行顏色相間和不同

一、奇偶選擇器

      表格在呈現數據的時候我們為了方便觀看，而隔行顯示不同的顏色，雖然可以用用類選擇器 class實現這種效果，但是未免太過麻煩，為了更加簡便地表現這種特殊的效果我們需要用到一種特殊的選擇器，這就是奇偶選擇器。

【class選擇器】

• <style type="text/css">
• .tr1{background-color:#F5F5F5}
• .tr2{background-color:#FFFFFF}
• </style>
• <table>
• <tr class="tr1"><td>...</td></tr>
• <tr class="tr2"><td>...</td></tr>
• <tr class="tr1"><td>...</td></tr>
• <tr class="tr2"><td>...</td></tr>
• </table>

二、奇偶選擇器的樣式：

• 前面通常是一個標簽或是其他類型的名字；
• 后面冒號  :  隔開,然后  n  表示第  n  個，child 表示子元素；
• child 后面跟着一對括號( )，這個括號里表示究竟是第幾個元素；
• 里面可以是一個數字或者是 odd(奇數個元素)  或者是 even(偶數個元素)
• 括號后面是大括號 {  } ，可以在里面放上背景顏色樣式；
• odd 是單行  
• even是雙行  

三、奇偶選擇器的應用

【奇偶選擇器】使用odd和even屬性，具體寫法如下所示：

• <style type="text/css">
•  tr:nth-child(odd) {.... }
• table tr:nth-child(even) { .... }
• </style>
• <table>
•   <tr><td>...</td></tr>
•   <tr><td>...</td></tr>
•   <tr><td>...</td></tr>
•   <tr><td>...</td></tr>
• </table>

四、奇偶選擇器的實例

      代碼示例

    最終的表現效果