CSS中,奇偶选择器可以很好地用于设置表格之类的元素的样式。特别是在使用伪类选择器: nth-child() 时,通过设置 2n 可以很容易地选择偶数或奇数的元素。
/* 偶数元素,包括第一项 */ tr:nth-child(even) { background-color: lightgrey; } /* 奇数元素 */ tr:nth-child(odd) { background-color: #f2f2f2; } /* 第3、6、9、12项 */ tr:nth-child(3n) { background-color: #ccc; } /* 偶数列 */ td:nth-child(even) { background-color: #f2f2f2; }
请注意,伪类选择器中的 2n 是一个计数器,从1开始递增计数。因此,可以选择从第二个元素开始,使用2n来选择偶数元素,或从第一个元素开始,使用2n+1来选择奇数元素。
/* 从第2项开始,偶数元素 */ tr:nth-child(2n) { background-color: #f2f2f2; } /* 从第1项开始,奇数元素 */ tr:nth-child(2n+1) { background-color: #ccc; }
在设置表格样式时,这些选择器非常有用,可以使表格更易于阅读和理解。此外,在其他地方也可以使用它们来设置列表、网格或其他类型的元素的视觉效果。