CSS3中自定義表格樣式的方法？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè),習(xí)水企業(yè)網(wǎng)站建設(shè),習(xí)水品牌網(wǎng)站建設(shè),網(wǎng)站定制,習(xí)水網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,習(xí)水網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

在CSS3中可以通過給元素設(shè)置偽元素nth-child（n）來實(shí)現(xiàn)自定義表格樣式，其中n可以為數(shù)值，關(guān)鍵字或者公式

在開發(fā)過程中，經(jīng)常會碰到一些表格樣式的需求，比如使表格中的第一行或者最后一行來顯示不同的樣式 ，又或者使表格中的奇數(shù)行或者偶數(shù)行顯示不同的背景色等等，這些效果我們可以通過CSS3中的偽類選擇器實(shí)現(xiàn)。

:nth-child（n）選擇器

:nth-child(n) 選擇器的作用是匹配屬于其父元素的第 N 個(gè)子元素，不管N的數(shù)據(jù)類型，所以N我們可以設(shè)置為數(shù)字，關(guān)鍵詞或者是公式

基本上所有的主流瀏覽器都支持這個(gè)屬性。

HTML代碼：

	

		

			
示例一
			
示例二
			
示例三
		
		

			
test1
			
test1
			
test1
		
		

			
test2
			
test2
			
test2
		
		

			
test3
			
test3
			
test3
		
	

效果圖：

（1）直接指定某一行

可以直接在偽元素的括號中添加所指定要改變背景顏色的表格行數(shù)

例：將表格中的第二行的背景顏色設(shè)置為灰色，可通過以下代碼來設(shè)置

tr:nth-child(2)
{
background:gray;
}

效果圖：

（2）通過設(shè)置倍數(shù)來改變表格背景顏色

例：將表格中為2的倍數(shù)設(shè)置成RGB(189,215,238)顏色，代碼如下

tr:nth-child(2n)
{
background:rgb(189,215,238);
}

效果圖如下

（3）通過公式來設(shè)置

例：將表格中n+1的行數(shù)設(shè)置背景顏色

tr:nth-child(n+3)
{
background:rgb(189,215,238);
}

效果圖如下

案例分析：通過:nth-child(n)選擇器來實(shí)現(xiàn)表格隔行變色的案例

tr:nth-child(2n)
{
background:rgb(189,215,238);
}
tr:nth-child(2n+1){
	background:rgb(207,238,252);
}

效果圖：

感謝各位的閱讀！看完上述內(nèi)容，你們對CSS3中自定義表格樣式的方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。