CSS3中,我們可以使用nth-child
選擇器來改變表格中每一行的顏色。
table tr:nth-child(even) { background-color: #f2f2f2; } table tr:nth-child(odd) { background-color: #ffffff; }
上面的代碼中,even
表示選中偶數(shù)行,odd
表示選中奇數(shù)行。我們可以分別在style標(biāo)簽或者外部CSS文件中使用這些代碼。
當(dāng)我們想要給表格添加更復(fù)雜的樣式時,可以在選中的行中使用不同的CSS屬性。例如,可以設(shè)置鼠標(biāo)懸浮時的背景顏色:
table tr:hover { background-color: #cccccc; }
這將給用戶一個反饋,告訴他們當(dāng)前選擇的行。
還有另一種方法可以改變表格的顏色,它是通過使用偽類:nth-of-type
來實現(xiàn)的,代碼如下:
table tr:nth-of-type(even) { background-color: #f2f2f2; } table tr:nth-of-type(odd) { background-color: #ffffff; }
這種方式與:nth-child
方法唯一的區(qū)別是,:nth-of-type
方法只選擇指定類型的元素。
總體來說,通過使用CSS3的:nth-child
和:nth-of-type
選擇器,我們可以根據(jù)表格的需要改變表格每一行的樣式,讓網(wǎng)頁更具吸引力和可讀性。