在CSS3中,我們可以使用:nth-child偽類來實現(xiàn)表格的隔行變色效果,以下是一個簡單的示例:
HTML代碼:
<table> <tr> <td>行1,列1</td> <td>行1,列2</td> </tr> <tr> <td>行2,列1</td> <td>行2,列2</td> </tr> <tr> <td>行3,列1</td> <td>行3,列2</td> </tr> <tr> <td>行4,列1</td> <td>行4,列2</td> </tr> </table>
CSS3代碼:
table { width: 100%; border-collapse: collapse; } table tr:nth-child(even) { background-color: #f2f2f2; }
在這個示例中,我們使用了:nth-child(even)來選擇偶數(shù)行,并將它們的背景色設(shè)置為#f2f2f2,這樣,表格就會呈現(xiàn)出隔行變色的效果,注意,這種方法僅適用于偶數(shù)行,如果你想要奇數(shù)行也有不同的顏色,可以使用:nth-child(odd)來選擇奇數(shù)行。
版權(quán)聲明:除非特別標(biāo)注,否則均為本站原創(chuàng)文章,轉(zhuǎn)載時請以鏈接形式注明文章出處。