CSS中的奇數偶數樣式是指在一組元素中,根據元素在這組元素中的位置來設置不同的樣式。通過使用偽類選擇器,我們可以輕松實現這種樣式效果。
/* 奇數行背景色為白色,偶數行背景色為灰色 */ tr:nth-child(odd) { background-color: #fff; } tr:nth-child(even) { background-color: #ccc; }
上面的代碼中,我們使用了:nth-child()偽類選擇器來選擇元素,其中括號中的odd表示奇數,even表示偶數。
除了背景色以外,我們還可以通過奇數偶數樣式來設置元素的其他樣式,比如字體顏色、字體大小等等。
/* 奇數行字體顏色為紅色,偶數行字體顏色為綠色 */ p:nth-child(odd) { color: #f00; } p:nth-child(even) { color: #0f0; }
除了在表格和段落中使用奇數偶數樣式,我們還可以在其他元素中使用。比如在ul列表中,我們可以給奇數個li元素設置背景色:
/* 奇數個li元素背景色為綠色 */ li:nth-child(odd) { background-color: #0f0; }
使用奇數偶數樣式可以讓頁面更加整潔美觀,增強視覺效果。