CSS3中非常常用的一個功能就是給table中的tr或td實現隔行換色的效果,通過這種簡單的樣式設置,可以讓我們的表格更加有層次感和美觀度。下面就來看一下如何通過CSS3實現table隔行換色。
/* 設置偶數行的背景顏色為#F2F2F2,即灰色 */ tr:nth-child(even) { background-color: #F2F2F2; } /* 設置奇數行的背景顏色為#FFFFFF,即白色 */ tr:nth-child(odd) { background-color: #FFFFFF; }
上面的代碼展示了兩個CSS選擇器:nth-child和even/odd。其中,nth-child選擇器表示選中table中的某一個子元素,如tr、td等,而even和odd則表示子元素的位置,even表示偶數位置,odd表示奇數位置。通過這種方式,我們可以輕松地設置偶數行和奇數行的背景顏色,實現table隔行換色。
上一篇css3 元素選擇器
下一篇html x軸設置長短