在CSS3中,我們可以通過(guò)使用:nth-child偽類(lèi)來(lái)實(shí)現(xiàn)表格隔行變色的效果,以下是一個(gè)簡(jiǎn)單的示例:
HTML代碼:
<table> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> <tr> <td>Row 2, Cell 1</td> <td>Row 2, Cell 2</td> </tr> <tr> <td>Row 3, Cell 1</td> <td>Row 3, Cell 2</td> </tr> <tr> <td>Row 4, Cell 1</td> <td>Row 4, Cell 2</td> </tr> </table>
CSS代碼:
table tr:nth-child(even) { background-color: #f2f2f2; }
在這個(gè)示例中,我們使用了:nth-child(even)來(lái)選擇偶數(shù)行,并將背景色設(shè)置為#f2f2f2,這樣,表格的偶數(shù)行就會(huì)呈現(xiàn)出一個(gè)稍微深一點(diǎn)的灰色背景,從而實(shí)現(xiàn)隔行變色的效果。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時(shí)請(qǐng)以鏈接形式注明文章出處。