淘先锋技术网

首页 1 2 3 4 5 6 7

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;
}

在设置表格样式时,这些选择器非常有用,可以使表格更易于阅读和理解。此外,在其他地方也可以使用它们来设置列表、网格或其他类型的元素的视觉效果。