有時候我們會需要設定表格所有奇數跟偶數的樣式
像這樣：

其實超簡單
用兩行CSS就搞定：



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

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




(odd)就是奇數；而(even)就是偶數的意思。
當然這個用法也可以套用在表格的td上面，
就只是把tr改成td就好：


td:nth-child(odd){
  background:#E8FAF6;
}

td:nth-child(even){
  background:#fff;
}


表格會變成這樣：






nth-child就是個順序的選取器，它有個更變態的用法，
在括弧輸入(odd)跟(even)是奇數跟偶數，輸入數字就變成了選順序！
例如你想要表格的第三列是紅色的、第五列是藍色的，可不可以？可以！

語法只要改成tr:nth-child(3)和tr:nth-child(5)就搞定，不過同時設定奇數跟偶數又要指定特定行數的樣式時，(odd)跟(even)的語法權重是比較高的，語法會沒用，所以要記得加上!important。變成這樣：


tr:nth-child(3){
  background:red !important;
}

tr:nth-child(5){
  background:blue !important;
}




另外nth-child的這個(1).(2)....(n)這個選取順序的功能，
還可以用來設定網頁選單中多種不同icon，語法超級乾淨簡單！
可以參考這篇文章：使用css3-nth-childn-選取器詳解



好好善用nth-child的用法吧！





2017.4.17補充：
另外也有first-child跟end-child的用法，
用在表格的順序不一定的時候直接固定選取表格的頭尾
例如你有兩欄或三欄的表格，都想設定頭尾要有圓角，
那麼就可以直接對th或td設定：

 .th:first-child , .td:first-child{
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px; 
}

 .th:last-child , .td:last-child{
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px; 
}


只要寫幾行就可以變成這樣：


不過上下表格列隔開要再另一個語法
可見此篇：http://blog.weibbb.com/2017/04/css.html