CSS中有一個很實(shí)用的技巧,可以為表格、列表等元素在奇數(shù)行和偶數(shù)行應(yīng)用不同的樣式,使頁面看起來更加清晰、整齊。
這需要用到CSS中的偽類選擇器:nth-child。
/* 奇數(shù)行樣式 */ tr:nth-child(odd) { background-color: #f7f7f7; } li:nth-child(odd) { color: green; } /* 偶數(shù)行樣式 */ tr:nth-child(even) { background-color: #ebebeb; } li:nth-child(even) { color: red; }
上面的代碼中,tr:nth-child(odd)表示選擇表格中的奇數(shù)行,li:nth-child(even)表示選擇列表中的偶數(shù)行,并對它們應(yīng)用相應(yīng)的樣式。
需要注意的是,nth-child的參數(shù)可以是數(shù)字,也可以是關(guān)鍵字,如odd和even,表示奇數(shù)和偶數(shù)。此外,nth-child也可以和其他選擇器組合使用,如class、id等。
奇偶行樣式的使用不僅限于表格和列表,還可以用于其他元素,如
、
- 等,只需要進(jìn)行相應(yīng)的CSS選擇器編寫就好了。