CSS3怎样实现选择表格的偶数行

当我们需要让表格的某些行有不同的样式时，通常会使用CSS来完成这项工作。而如果只想对表格中的每隔一行进行样式设置，则可以使用:nth-child(even)或者:nth-of-type(even)这两个伪类。

企业建站必须是能够以充分展现企业形象为主要目的，是企业文化与产品对外扩展宣传的重要窗口，一个合格的网站不仅仅能为公司带来巨大的互联网上的收集和信息发布平台，成都创新互联面向各种领域：成都宴会酒店设计等网站设计、营销型网站解决方案、网站设计等建站排名服务。

## :nth-child()

:nth-child(n) 会匹配所有父元素下第n个子元素，并且不区分该子元素类型。在一个ul列表中，:nth-child(2)可以匹配到li、p、span等任何标签类型的第二个子元素。

那么如何利用:nth-child()来选取偶数行呢？我们只需将n替换为2n即可：

```

tr:nth-child(even){ /* 偶数 */

background-color: #f5f5f5;

}

tr:nth-child(odd){ /* 奇数 */

background-color: #fff;

上述代码表示：将背景颜色设置为#f5f5f5（浅灰色）的是表格中第2、4、6……等编号为偶数（even）的标签；而将背景颜色设置为#fff（白色）的则是表格中第1、3、5……等编号为奇数（odd）的标签。

## :nth-of-type()

与:nth-child()类似，:nth-of-type(n)也会匹配所有父元素下第n个子元素。但不同之处在于，在一个ul列表中，:nth-of-type(2)只会匹配到li标签类型的第二个子元素，而不会匹配到p或span等其他标签类型。

在选取偶数行时使用:nth-of-type()可能更加准确：

tr:nth-of-type(even){ /* 偶数 */

tr:nth-of-type(odd){ /* 奇数 */

上述代码与前面所示效果完全一样。这里仅仅是通过换用了另外一个伪类实现了相同的功能。

## 总结

以上就是使用CSS3来选择表格偶数行的方法。如果需要选取奇数行，则只需将“even”改成“odd”即可。

本文标题：CSS3怎样实现选择表格的偶数行
链接URL：http://www.mswzjz.cn/qtweb/news13/31063.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能