css 奇偶数选择器

CSS奇偶数选择器是CSS选择器的一种，它可以实现对页面中的奇偶元素进行样式设置。我们可以使用:nth-child伪类选择器，但是在实际应用中，我们会更倾向于使用:nth-of-type选择器。

/*选择页面中所有奇数行并设置背景色为红色*/p:nth-of-type(odd){
        background-color: red;
}
/*选择页面中所有偶数行并设置背景色为蓝色*/p:nth-of-type(even){
        background-color: blue;
}

奇偶数选择器常见应用就是对表格的奇偶行进行样式设置。

/*选择表格中所有奇数行并设置背景色为灰色*/tr:nth-of-type(odd){
        background-color: gray;
}
/*选择表格中所有偶数行并设置背景色为白色*/tr:nth-of-type(even){
        background-color: white;
}

需要注意的是，奇偶数选择器可以选择的是同一级别下的元素，例如在ul列表中，我们要选择的是列表项li元素，而不是li中的子元素。

/*不起作用*/ul li:nth-of-type(odd){
        background-color: gray;
}
/*正确写法*/ul:nth-of-type(odd) li{
        background-color: gray;
}

奇偶数选择器不仅可以选择行，也可以选择列，例如选择表格中第一列的所有单元格。

/*选择表格中第一列所有单元格并设置背景色为灰色*/td:nth-of-type(1){
        background-color: gray;
}

在实际应用中，通过奇偶数选择器来实现斑马线效果是一种优秀的选择。

/*斑马线效果*/tr:nth-of-type(even){
        background-color: #f2f2f2;
}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！