CSS中使用tr:nth-child(odd/even)可以實現(xiàn)表格隔行換色的效果。使用odd時,會選擇表格中序號為奇數(shù)的行,使用even時則會選擇表格中序號為偶數(shù)的行。以下是實現(xiàn)隔行換色的示例代碼:
table { border-collapse: collapse; } table tr:nth-child(odd) { background-color: #f5f5f5; }
代碼中,我們首先將表格的邊框合并。接著,使用:nth-child(odd)選擇器選擇表格中序號為奇數(shù)的行,并設置它們的背景顏色為淺灰色。這樣,表格就會實現(xiàn)隔行換色的效果。
除了使用奇偶選擇器,我們還可以使用:nth-child(n)選擇器來指定具體的行數(shù)。例如,要設置表格中第3行和第5行的背景顏色為淡黃色,我們可以這樣寫:
table tr:nth-child(3), table tr:nth-child(5) { background-color: #ffffcc; }
在代碼中,我們使用“逗號”將兩個選擇器連接在一起,使它們都應用同樣的樣式。這樣,表格中第3行和第5行的背景顏色就都會變成淡黃色。
隔行換色是一種常見的表格美化方式,能夠讓表格更加易讀。在實際應用中,我們可以根據(jù)實際需求自定義表格的顏色和樣式,給頁面帶來更好的用戶體驗。