nth-child() 應用背景
CSS3的nth-child() 選擇器，我之前很少用，在做表格偶數行變色的時候，我通常在綁定的時候，做一個js判斷，來加一個css，從而使表格偶數行和奇數行顏色不一樣。這樣的兼容性很好。但是最近在做手機網站的時候，由於手機網站對瀏覽器兼容要求相對較低，手機瀏覽器大部分都支持css3，這就大大提高了開發效率。可以隨意使用CSS3 :nth-child()偽類選擇器。
nth-child()瀏覽器支持
IE9及以上版本，火狐，谷歌，Safari ，Opera都支持！
定義和用法
:nth-child(n) 選擇器匹配屬於其父元素的第 n個子元素，不論元素的類型。
n 可以是數字、關鍵詞或公式。
例如：
p:nth-child(2) { background:#ff0000; } <body> <h1>這是標題</h1> <p>haorooms第一個段落。</p> <p>haorooms第二個段落。</p> <p>haorooms第三個段落。</p> <p>haorooms第四個段落。</p> </body>
上面這段代碼請問那個段落顏色是紅色的？
答案是“haorooms第一個段落。”顏色變成了紅色！
解釋：:nth-child(n) 選擇器匹配屬於其父元素的第 n個子元素，不論元素的類型。p:nth-child(2),P標簽的父元素是body，body的第二個子元素是“haorooms第一個段落。”所以haorooms第一個段落顏色變為了紅色！！！
注意
很多朋友經常把:nth-child() 和:nth-of-type()混淆。
CSS3 :nth-of-type() 選擇器的意思是“規定屬於其父元素的第二個 p 元素”
看下面的例子：
p:nth-of-type(2) { background:#ff0000; } <body> <h1>這是標題</h1> <p>haorooms第一個段落。</p> <p>haorooms第二個段落。</p> <p>haorooms第三個段落。</p> <p>haorooms第四個段落。</p> </body>
代碼一樣，我的樣式僅僅是把 p:nth-child(2)改成了 p:nth-of-type(2)，現在就是“haorooms第二個段落。”顏色變成了紅色。
奇偶數匹配
現在開始說說我開通說的table的tr偶數行變色的問題了。
因為table的子元素一般是tr，不會有別的，所以可以用
tr:nth-child(odd) 與 tr:nth-child(even)
當然也可以用
tr:nth-of-type(odd) tr:nth-of-type(even)
分別匹配序號為奇數與偶數的元素。奇數(odd)與(2n+1)結果一樣；偶數(even)與(2n+0)及(2n)結果一樣。
倍數寫法
:nth-child(an) 【:nth-of-type(an)同理，不解釋】
匹配所有倍數為a的元素。其中參數an中的字母n不可缺省，它是倍數寫法的標志，如3n、5n。
例子：
li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍數的LI的背景設為橙色*
延伸
:nth-child(2n+1)， :nth-child(2n-3) ， :nth-child(4n+3) ，還可以 :nth-child(-an+b)也就是反向匹配。
總之，你可以用了:nth-child偽類，可以對多個標簽有規律的進行不同的顯示，顯示出CSS3的強大。css3需要多用，熟能生巧，在書寫的時候，經常會把一些css3的屬性忘掉，你可以多手寫幾遍。