table 隔列(行)換色效果讓表格結(jié)構(gòu)更清淅
更新時間：2012年12月25日 16:37:04 投稿：whsnow
table 隔列換色效果，很實用的一款網(wǎng)頁特效代碼，用隔行換色來修飾表格，可讓表格結(jié)構(gòu)更清淅，也更加美觀，是一個十分流行的表格特效,在網(wǎng)頁中有利于提高用戶體驗，是一個很不錯的效果，需要的朋友可以參考下
table 隔列換色效果
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
現(xiàn)在很多頁面都是使用css來實現(xiàn)
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
css3隔行換色擴展閱讀
結(jié)構(gòu)偽選擇器
顧名思議,結(jié)構(gòu)偽類選擇器是利用DOM實現(xiàn)元素過濾,也就是說它是通過文檔結(jié)構(gòu)之間的相互關(guān)系來進行匹配,從而減少文檔內(nèi)對class和平ID的定義.
| 選擇器 | 說明 |
| E:root | 匹配E所在文檔的根元素.在html文檔中,根元素就是html 標簽. |
| E:nth-last-child(n) | 選擇E元素,且它是父元素的倒數(shù)第n個子元素 |
| E:nth-of-type(n) | 選擇E元素,且它是父元素所有子元素中類型為E的子元素集合中的第n個,n可以是數(shù)字(1,2,3),關(guān)鍵字(odd,even),公式(2n,2n+3),數(shù)字是從1開始的,不是0.如p:nth-of-type(2)匹配出,<div><h1></h1><p></p><p></p></div>中第二個p元素 |
| E:nth-last-of-type(n) | 選擇E元素,且它是父元素的倒數(shù)第n個子節(jié)點 |
| E:last-child | 找出E元素,且它是父元素中的最后一個字節(jié)點 |
| E:first-of-tpe | 找出E元素,且它是父元素中是第一個該類型的元素,如p:first-of-type匹配<div><p></p><p></p>中的第一個p元素. |
| E:last-of-type | 找出E元素,且它是父元素中的最后一個該類型的元素.如:p:last-of-type匹配,<div><p></p><p></p></div>中的最后一個p元素,它同E:nth-last-of-tpe(1)意義相同 |
| E:only-child | 找出父元素中只包括一個的子元素,且該元素是E |
| E:only-of-type | 選擇其父元素只包含一個同類型的子元素,且該子元素匹配E.如p:only-of-type匹配<div><p></p></div>中的p,因為div中只包括一個p元素 |
| E:empty | 匹配E元素,且該元素不包含子節(jié)點,注意,文字也屬于節(jié)點 |
瀏覽器兼容性
| IE | Firefox | Opera | Safari | Chrome |
| IE9及以上 | 3.5及以上 | 9.6及以上 | 3.1及以上 | 1.0及以上 |
以上就是table 隔列(行)換色效果讓表格結(jié)構(gòu)更清淅的詳細內(nèi)容，更多關(guān)于隔行換色修飾表格的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
網(wǎng)頁煙花特效方便使用，更能給養(yǎng)眼享受，復制黏貼就能使用，快來試試吧。這篇文章主要介紹了html+JavaScript煙花3D特效（親測可用）,需要的朋友可以參考下2023-01-01
js實現(xiàn)花俏的轉(zhuǎn)動、旋轉(zhuǎn)之后慢慢張開的窗口特效
花俏的轉(zhuǎn)動的窗口，主要是使用JavaScript代碼實現(xiàn)，運行本效果后，窗口不斷旋轉(zhuǎn)，而后慢慢張開，很炫的效果，看到之后我都目瞪口呆了，真的是很炫，期待喜歡的朋友借鑒參考2012-12-12
javascript實現(xiàn)div的拖動并調(diào)整大小類似qq空間個性編輯模塊
qq空間的個性編輯模塊可以隨意的拖動頁面上的元素并且調(diào)動大小實現(xiàn)動態(tài)布局;這種效果的確很酷,那么我們也來實現(xiàn)一個吧2012-12-12
程序員的你是不是也想送個特別的禮物。今天給大家分享一個HTML+CSS+jQuery實現(xiàn)的情侶浪漫愛心表白JS特效，視覺效果還是相當不錯！得此表白神器，程序猿也可以很浪漫！快去追你的女神吧，把這個告白愛心動畫發(fā)給你心愛的她！2023-01-01
用JavaScript實現(xiàn)的模擬氣泡屏保效果代碼，包括氣泡的碰撞效果，喜歡的朋友可以參考下。2010-07-07
JavaScript檢測判斷用戶輸入的URL是否正確，簡單的正則規(guī)則，很準確的判斷URL的合法性，值得借鑒。2010-10-10
Js實現(xiàn)網(wǎng)頁另存為，點擊按鈕即可實現(xiàn)，網(wǎng)頁代碼。2010-09-09
Js獲取屏幕的顏色色彩品質(zhì)，16位或32位，只需運行本代碼，即可得到你當前屏幕的顏色品質(zhì)，現(xiàn)在一般都是32位了。2010-09-09
電影黑客帝國有個代碼雨效果，滿滿的既視感，身為程序猿的你羨慕嗎？只要很簡單的HTML+JavaScript就能實現(xiàn)，甚至不需要懂任何技術(shù)。這篇文章主要介紹了簡單JS打造酷炫代碼雨（黑客高逼格）,需要的朋友可以參考下2023-01-01
一個挺小的JavaScript網(wǎng)頁計算器，界面美化的我想還是不錯的，畢竟在沒有使用任何圖片修飾的情況下，很好看，而且功能挺實用，可以完成基本的數(shù)學算數(shù)運算2013-09-09