CSS樣式按行換色是一個非常實用的技巧。通過使用CSS,我們可以為網頁表格或列表中的每一行添加不同的顏色,以提高其可讀性。
/* 給表格的奇數行添加背景色 #F2F2F2 */ tr:nth-child(odd) { background-color: #F2F2F2; } /* 給列表的奇數行添加背景色 #F2F2F2 */ li:nth-child(odd) { background-color: #F2F2F2; }
在上面的代碼中,我們使用了CSS偽類:nth-child來選擇表格或列表中的奇數行,并為其添加特定的背景色。偶數行將不受影響,顏色將保持默認值。
如果我們想要改變偶數行的背景色,只需要調整一下代碼:
/* 給表格的偶數行添加背景色 #D9D9D9 */ tr:nth-child(even) { background-color: #D9D9D9; } /* 給列表的偶數行添加背景色 #D9D9D9 */ li:nth-child(even) { background-color: #D9D9D9; }
這樣,我們就為表格或列表的每一行都添加了不同的背景色。這種技巧非常簡單易懂,且易于維護。