在CSS樣式表中,還有一種常見的奇偶行填充方法,它的作用是讓表格或列表的相鄰行或列樣式不同,以便更好地區分它們。
/* 奇偶行填充 */ tr:nth-child(odd) { background-color: #f2f2f2; } /* 奇偶列填充 */ td:nth-child(odd) { background-color: #f2f2f2; }
在上面的代碼中,我們使用了CSS3的nth-child偽類選擇器,其含義是選擇當前元素的第n個子元素,而odd則表示奇數。
例如,上面的tr:nth-child(odd)選擇器將選擇所有表格中的奇數行(從1開始計數),并將它們的背景色設置為#f2f2f2,進而實現了奇偶行填充的效果。
同樣地,我們也可以使用td:nth-child(odd)選擇器來實現奇偶列填充的效果。
需要注意的是,nth-child選擇器是CSS3中新加入的,因此它的兼容性可能并不完美,需要在使用時進行測試。