快捷導(dǎo)航

table 隔列(行)換色效果讓表格結(jié)構(gòu)更清淅

更新時(shí)間：2012年12月25日 16:37:04 投稿：whsnow

table 隔列換色效果，很實(shí)用的一款網(wǎng)頁(yè)特效代碼，用隔行換色來(lái)修飾表格，可讓表格結(jié)構(gòu)更清淅，也更加美觀，是一個(gè)十分流行的表格特效,在網(wǎng)頁(yè)中有利于提高用戶(hù)體驗(yàn)，是一個(gè)很不錯(cuò)的效果，需要的朋友可以參考下

table 隔列換色效果

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

現(xiàn)在很多頁(yè)面都是使用css來(lái)實(shí)現(xiàn)

<!doctype html><html><head><meta charset="gb2312"><title>css3隔行換色測(cè)試</title><meta name="description" content="" /><style>#list1 li:nth-of-type(odd){background:#00CCFF;}/*奇數(shù)行*/#list1 li:nth-of-type(even){background:#FFCC00;}/*偶數(shù)行*/#list2 li:nth-child(4n+1){background:#00CCFF;}/*從第一行開(kāi)始算起 每隔4個(gè)（包含第四個(gè)）使用次樣式*/#list00000 li:nth-child(4n+2){background:#090;}/*從第二行開(kāi)始算起 每隔4個(gè)（包含第四個(gè)）使用次樣式*/#list00000 li:nth-child(4n+3){background:#009;}/*從第三行開(kāi)始算起 每隔4個(gè)（包含第四個(gè)）使用次樣式*/#list00000 li:nth-child(4n+4){background:#990;}/*從第四行開(kāi)始算起 每隔4個(gè)（包含第四個(gè)）使用次樣式*/</style></head><body><ul id="list1"><li>1111111腳本之家</li><li>222222222222CSS3隔行換色測(cè)試</li><li>333333333提供jquery 教程實(shí)例學(xué)習(xí)代碼、html5教程實(shí)例和css/css3教程實(shí)例學(xué)習(xí)代碼。</li><li>44444444</li><li>55555555555555</li><li>66666666666666666</li></ul><hr/><ul id="list2"><li>11111111111111</li><li>22222222222222</li><li>33333333333333</li><li>444444444444444</li><li>腳本之家55555555555555</li><li>66666666666666666</li></ul></body></html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

css3隔行換色擴(kuò)展閱讀

結(jié)構(gòu)偽選擇器
顧名思議,結(jié)構(gòu)偽類(lèi)選擇器是利用DOM實(shí)現(xiàn)元素過(guò)濾,也就是說(shuō)它是通過(guò)文檔結(jié)構(gòu)之間的相互關(guān)系來(lái)進(jìn)行匹配,從而減少文檔內(nèi)對(duì)class和平ID的定義.

選擇器	說(shuō)明
E:root	匹配E所在文檔的根元素.在html文檔中,根元素就是html 標(biāo)簽.
E:nth-last-child(n)	選擇E元素,且它是父元素的倒數(shù)第n個(gè)子元素
E:nth-of-type(n)	選擇E元素,且它是父元素所有子元素中類(lèi)型為E的子元素集合中的第n個(gè),n可以是數(shù)字(1,2,3),關(guān)鍵字(odd,even),公式(2n,2n+3),數(shù)字是從1開(kāi)始的,不是0.如p:nth-of-type(2)匹配出,<div><h1></h1><p></p><p></p></div>中第二個(gè)p元素
E:nth-last-of-type(n)	選擇E元素,且它是父元素的倒數(shù)第n個(gè)子節(jié)點(diǎn)
E:last-child	找出E元素,且它是父元素中的最后一個(gè)字節(jié)點(diǎn)
E:first-of-tpe	找出E元素,且它是父元素中是第一個(gè)該類(lèi)型的元素,如p:first-of-type匹配<div><p></p><p></p>中的第一個(gè)p元素.
E:last-of-type	找出E元素,且它是父元素中的最后一個(gè)該類(lèi)型的元素.如:p:last-of-type匹配,<div><p></p><p></p></div>中的最后一個(gè)p元素,它同E:nth-last-of-tpe(1)意義相同
E:only-child	找出父元素中只包括一個(gè)的子元素,且該元素是E
E:only-of-type	選擇其父元素只包含一個(gè)同類(lèi)型的子元素,且該子元素匹配E.如p:only-of-type匹配<div><p></p></div>中的p,因?yàn)閐iv中只包括一個(gè)p元素
E:empty	匹配E元素,且該元素不包含子節(jié)點(diǎn),注意,文字也屬于節(jié)點(diǎn)