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;

}

這是標題

碼云筆記第一個段落。

碼云筆記第二個段落。

碼云筆記第三個段落。

碼云筆記第四個段落。

解釋：:nth-child(n) 選擇器匹配屬于其父元素的第 n個子元素，不論元素的類型。p:nth-child(2),P標簽的父元素是body，body的第二個子元素是“碼云筆記第一個段落。”所以碼云筆記第一個段落顏色變為了紅色！！！

需注意

很多小伙伴經常把:nth-child() 和:nth-of-type()混淆。

CSS3 :nth-of-type() 選擇器的意思是“規定屬于其父元素的第二個 p 元素”

看下面的例子：

p:nth-of-type(2)

{

background:#ff0000;

}

這是標題

碼云筆記第一個段落。

碼云筆記第二個段落。

碼云筆記第三個段落。

碼云筆記第四個段落。

代碼一樣，我的樣式僅僅是把p:nth-child(2)改成了p:nth-of-type(2)，現在就是“碼云筆記第二個段落。”顏色變成了紅色。

奇偶數匹配

現在開始說說我開通說的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 nth-child()選擇器 實現表格奇偶行變色的全部知識。css3需要多用，熟能生巧，在書寫的時候，經常會把一些css3的屬性忘掉，你可以多手寫幾遍。關于css選擇器，后續在為大家整理一篇相關文章，敬請期待吧。

總結

以上是生活随笔為你收集整理的php表单偶数变颜色,利用CSS3 nth-child()选择器 实现表格奇偶行变色的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。