CSS中偶數奇數行變色是一個很常見的需求,在表格、列表等實際開發場景中,使用起來非常方便。下面我們看一下具體實現的代碼。
/* 偶數行的背景色 */ tr:nth-child(even) { background-color: #f2f2f2; } /* 奇數行的背景色 */ tr:nth-child(odd) { background-color: #ffffff; }
在代碼中,我們利用CSS3新增的選擇器nth-child來選擇特定的行進行樣式設置。使用even表示選中偶數行,odd表示選中奇數行。可以看到,通過這種方式,我們可以非常方便地實現表格的隔行變色效果。
需要注意的是,在使用nth-child選擇器時,我們必須將其放在特定的元素上。在表格中,我們通常會將其放在tr元素上,表示選擇表格中的行進行樣式設置。在其他場景中,我們可以根據需求選擇對應的元素。