nth-child()簡(jiǎn)介

CSS3的nth-child() 選擇器，我之前很少用，在做表格偶數(shù)行變色的時(shí)候，我通常在綁定的時(shí)候，做一個(gè)js判斷，來加一個(gè)css，從而使表格偶數(shù)行和奇數(shù)行顏色不一樣。這樣的兼容性很好。但是最近在做手機(jī)網(wǎng)站的時(shí)候，由于手機(jī)網(wǎng)站對(duì)瀏覽器兼容要求相對(duì)較低，手機(jī)瀏覽器大部分都支持css3，這就大大提高了開發(fā)效率。可以隨意使用CSS3 :nth-child()偽類選擇器。

nth-child()瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個(gè)瀏覽器版本號(hào)。

由上圖可以看出，IE9及以上版本，火狐，谷歌，Safari ，Opera都支持！

定義和用法

:nth-child(n) 選擇器匹配屬于其父元素的第 n個(gè)子元素，不論元素的類型。

n 可以是數(shù)字、關(guān)鍵詞或公式。

例如：

p:nth-child(2)

{

background:#ff0000;

}

這是標(biāo)題

碼云筆記第一個(gè)段落。

碼云筆記第二個(gè)段落。

碼云筆記第三個(gè)段落。

碼云筆記第四個(gè)段落。

解釋：:nth-child(n) 選擇器匹配屬于其父元素的第 n個(gè)子元素，不論元素的類型。p:nth-child(2),P標(biāo)簽的父元素是body，body的第二個(gè)子元素是“碼云筆記第一個(gè)段落。”所以碼云筆記第一個(gè)段落顏色變?yōu)榱思t色！！！

需注意

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

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

看下面的例子：

p:nth-of-type(2)

{

background:#ff0000;

}

這是標(biāo)題

碼云筆記第一個(gè)段落。

碼云筆記第二個(gè)段落。

碼云筆記第三個(gè)段落。

碼云筆記第四個(gè)段落。

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

奇偶數(shù)匹配

現(xiàn)在開始說說我開通說的table的tr偶數(shù)行變色的問題了。

因?yàn)閠able的子元素一般是tr，不會(huì)有別的，所以可以用

tr:nth-child(odd) 與 tr:nth-child(even)

當(dāng)然也可以用

tr:nth-of-type(odd)

tr:nth-of-type(even)

分別匹配序號(hào)為奇數(shù)與偶數(shù)的元素。奇數(shù)(odd)與(2n+1)結(jié)果一樣；偶數(shù)(even)與(2n+0)及(2n)結(jié)果一樣。

倍數(shù)寫法

:nth-child(an)【:nth-of-type(an)同理，不解釋】

匹配所有倍數(shù)為a的元素。其中參數(shù)an中的字母n不可缺省，它是倍數(shù)寫法的標(biāo)志，如3n、5n。

例子：

li:nth-child(3n){background:orange;}/*把第3、第6、第9、…、所有3的倍數(shù)的LI的背景設(shè)為橙色*

延伸

:nth-child(2n+1)， :nth-child(2n-3) ， :nth-child(4n+3) ，還可以 :nth-child(-an+b)也就是反向匹配。

總之，你可以用了:nth-child偽類，可以對(duì)多個(gè)標(biāo)簽有規(guī)律的進(jìn)行不同的顯示，顯示出CSS3的強(qiáng)大。

結(jié)語

以上就是幾天為大家?guī)淼年P(guān)于CSS3 nth-child()選擇器 實(shí)現(xiàn)表格奇偶行變色的全部知識(shí)。css3需要多用，熟能生巧，在書寫的時(shí)候，經(jīng)常會(huì)把一些css3的屬性忘掉，你可以多手寫幾遍。關(guān)于css選擇器，后續(xù)在為大家整理一篇相關(guān)文章，敬請(qǐng)期待吧。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。