CSS3引入了一系列的偽類,其中包括了用于選擇偶數(shù)元素的:nth-child(even)
偽類。
該偽類的語(yǔ)法非常簡(jiǎn)單,只需要在選擇器中加入:nth-child(even)
即可。該偽類會(huì)選擇所有在父元素中偶數(shù)位置的子元素。
/* 選擇所有偶數(shù)行 */ tr:nth-child(even) { background-color: #f2f2f2; } /* 選擇所有偶數(shù)列表項(xiàng) */ ul li:nth-child(even) { color: blue; }
在上述代碼中,我們使用了:nth-child(even)
偽類來(lái)選擇所有偶數(shù)行和偶數(shù)列表項(xiàng),并將它們的樣式進(jìn)行了修改。
需要注意的是,該偽類選擇的是從1開(kāi)始計(jì)數(shù)的位置,而非索引。例如,在下面的HTML代碼中:
<ul> <li>第1項(xiàng)</li> <li>第2項(xiàng)</li> <li>第3項(xiàng)</li> <li>第4項(xiàng)</li> </ul>
使用:nth-child(even)
偽類選擇偶數(shù)列表項(xiàng)時(shí),會(huì)選中第2項(xiàng)和第4項(xiàng),而非索引為1和3的項(xiàng)。
總結(jié)一下,:nth-child(even)
偽類在CSS中的使用非常普遍,可以用于選擇偶數(shù)行、偶數(shù)列、偶數(shù)列表項(xiàng)等。它的使用也非常簡(jiǎn)單,只需要在選擇器中加入該偽類即可。