在CSS中,我們可以使用各種選擇器來選擇頁面中的元素,對于選擇偶數(shù)行,CSS并沒有直接提供這樣的功能,不過,我們可以通過一些技巧來實(shí)現(xiàn)這個目標(biāo)。
我們可以給每一行元素添加一個***的類名,
<div class="row">內(nèi)容1</div> <div class="row">內(nèi)容2</div> <div class="row">內(nèi)容3</div> <div class="row">內(nèi)容4</div>
我們可以使用CSS的偽類選擇器來區(qū)分奇數(shù)和偶數(shù)行,我們可以使用:nth-child(even)
來選擇偶數(shù)行:
.row:nth-child(even) { background-color: #f2f2f2; }
這樣,偶數(shù)行的背景色就會變?yōu)?code>#f2f2f2。
我們還可以使用JavaScript來動態(tài)地給偶數(shù)行添加類名,
var rows = document.getElementsByClassName('row'); for (var i = 0; i < rows.length; i++) { if (i % 2 === 1) { rows[i].classList.add('odd-row'); } else { rows[i].classList.add('even-row'); } }
這樣,奇數(shù)行就會添加odd-row
類名,偶數(shù)行就會添加even-row
類名,我們就可以使用CSS來分別設(shè)置奇數(shù)和偶數(shù)行的樣式了。
.odd-row { background-color: #f9f9f9; } .even-row { background-color: #f2f2f2; }
這樣,奇數(shù)和偶數(shù)行的背景色就會分別變?yōu)?code>#f9f9f9和#f2f2f2
了。