CSS中,奇偶選擇器可以很好地用于設(shè)置表格之類的元素的樣式。特別是在使用偽類選擇器: nth-child() 時(shí),通過設(shè)置 2n 可以很容易地選擇偶數(shù)或奇數(shù)的元素。
/* 偶數(shù)元素,包括第一項(xiàng) */ tr:nth-child(even) { background-color: lightgrey; } /* 奇數(shù)元素 */ tr:nth-child(odd) { background-color: #f2f2f2; } /* 第3、6、9、12項(xiàng) */ tr:nth-child(3n) { background-color: #ccc; } /* 偶數(shù)列 */ td:nth-child(even) { background-color: #f2f2f2; }
請(qǐng)注意,偽類選擇器中的 2n 是一個(gè)計(jì)數(shù)器,從1開始遞增計(jì)數(shù)。因此,可以選擇從第二個(gè)元素開始,使用2n來選擇偶數(shù)元素,或從第一個(gè)元素開始,使用2n+1來選擇奇數(shù)元素。
/* 從第2項(xiàng)開始,偶數(shù)元素 */ tr:nth-child(2n) { background-color: #f2f2f2; } /* 從第1項(xiàng)開始,奇數(shù)元素 */ tr:nth-child(2n+1) { background-color: #ccc; }
在設(shè)置表格樣式時(shí),這些選擇器非常有用,可以使表格更易于閱讀和理解。此外,在其他地方也可以使用它們來設(shè)置列表、網(wǎng)格或其他類型的元素的視覺效果。