CSS3的nth-child() 選擇器，表格奇偶行變色 · CSS學習寶典

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的屬性忘掉，你可以多手寫幾遍。關于css選擇器，也可以看http://www.haorooms.com/tools/css_selecter/