CSS可以輕松選擇表格中的奇偶數行,并使它們呈現出不同的樣式,使得表格更具可讀性。在下面的代碼中,我們將使用一個簡單的HTML表格來說明如何使用CSS選擇器:
<table> <tr> <th>姓名</th> <th>年齡</th> <th>性別</th> </tr> <tr> <td>張三</td> <td>25</td> <td>男</td> </tr> <tr> <td>李四</td> <td>30</td> <td>男</td> </tr> <tr> <td>王五</td> <td>28</td> <td>女</td> </tr> <tr> <td>趙六</td> <td>27</td> <td>女</td> </tr> </table>
現在,我們想要為表格中的偶數行添加不同的背景顏色,可以通過使用CSS中的偽類選擇器實現:
table tr:nth-of-type(even) { background-color: #e1e1e1; }
在上面的代碼中,我們使用了nth-of-type
偽類選擇器,并傳遞了參數even
,即選擇偶數行。我們還為這些行指定了不同的背景顏色為#e1e1e1。
同樣,我們也可以為表格中的奇數行添加不同的樣式:
table tr:nth-of-type(odd) { background-color: #f1f1f1; }
在上面的代碼中,我們使用了nth-of-type
偽類選擇器,并傳遞了參數odd
,即選擇奇數行。我們為這些行指定了不同的背景顏色為#f1f1f1。
使用這些CSS選擇器,我們可以輕松的為表格的奇偶數行添加不同的樣式,提高表格的可讀性。
上一篇java隊列和棧ppt
下一篇css提升技巧大全