在網頁中,表格是經常用到的一種元素。如果表格中有很多數據,那么為了方便用戶查看,我們可以讓表格中的奇偶行顏色不同,這樣可以減輕用戶閱讀時的視覺疲勞。CSS提供了一種方便的方式來實現這個效果。
/* 通過nth-child選擇器實現 */ table tr:nth-child(odd) { background-color: #f2f2f2; } table tr:nth-child(even) { background-color: #ffffff; }
上面的代碼通過使用nth-child選擇器來選擇表格中的奇數行和偶數行,然后分別設置它們的背景顏色。奇數行的背景顏色為淺灰色,偶數行的背景顏色為白色,這樣就可以讓表格變得更加清晰易讀。
需要注意的是,這種實現方式要求表格每一行都要是一個