Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $YECBGYFECGEAFWHA as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2

Deprecated: imwpcache\f884414bce24ee67f\f73723ec7b1919fa5::__construct(): Implicitly marking parameter $BBWFDDBHHYHDXXAB as nullable is deprecated, the explicit nullable type must be used instead in /www/wwwroot/www.chuangxiangniao.com/wp-content/plugins/imwpcache-dist/build/f884414bce24ee67ff73723ec7b1919fa5.php on line 2
CSS选择器实现斑马纹表格的三种方法_创想鸟
原创投稿
  1. 创想鸟首页
  2. 用户投稿

CSS选择器实现斑马纹表格的三种方法

程序猿 • • 用户投稿

要实现斑马纹表格效果，可使用纯css的三种方法。1. 使用tr:nth-child(odd)和tr:nth-child(even)，优点是写法简单但需注意表头及嵌套结构影响计数；2. 使用tr:nth-of-type(odd)，更精准控制仅计算

元素适用于复杂结构；3. 使用@for循环配合类名适合scss/less预处理器优点是样式灵活但需手动或动态添加类名。不同场景选择不同方式以达到最佳效果。

CSS选择器实现斑马纹表格的三种方法

要实现斑马纹表格效果，也就是让表格的奇数行和偶数行有不同的背景色，CSS 提供了多种选择器可以完成这个任务。不需要 JavaScript，也不需要给每一行加额外类名，纯 CSS 就能搞定。

CSS选择器实现斑马纹表格的三种方法

下面介绍三种常用的实现方式，适用于不同场景和浏览器兼容性需求。

CSS选择器实现斑马纹表格的三种方法

使用 tr:nth-child(odd) 和 tr:nth-child(even)

这是最常见也最直观的方式。利用 nth-child 伪类选择器，根据行号是奇数还是偶数来设置不同的样式。

立即学习“前端免费学习笔记（深入）”；

tr:nth-child(odd) {  background-color: #f2f2f2;}tr:nth-child(even) {  background-color: #ffffff;}

优点：语义清晰，写法简单。注意点：如果表格中有表头（

），要注意 tr 的计数是否包含表头行。在嵌套表格或复杂结构中可能会选错行。

如果你希望只对

中的行生效，可以这样写：

CSS选择器实现斑马纹表格的三种方法

tbody tr:nth-child(odd) {  background-color: #f2f2f2;}

使用 tr:nth-of-type(odd) 更精准控制

nth-of-type 和 nth-child 看起来差不多，但行为略有区别。nth-of-type 只会计算特定类型的子元素，比如只计算

类型的子元素。

tr:nth-of-type(odd) {  background-color: #f2f2f2;}

适用场景：当表格结构中夹杂了其他类型元素（如

或注释节点）时，更推荐使用 nth-of-type。对比：nth-child 是按所有子元素顺序判断位置；nth-of-type 只看当前标签类型的位置。

举个例子：

Pic Copilot Pic Copilot

AI时代的顶级电商设计师，轻松打造爆款产品图片

Pic Copilot 158 查看详情 Pic Copilot 

干扰项
  
Row 1
    
Row 2

在这种结构下：

tr:nth-child(odd) 会选择第一个

和

后面的

（因为它们分别是第1、3个子元素）；而 tr:nth-of-type(odd) 只会选到第一个

，因为第二个

是第2个 tr 类型的元素。

使用 @for 循环配合类名（适合 SCSS/Less 预处理器）

如果你在用 Sass 或 Less 这样的 CSS 预处理器，还可以通过循环生成带类名的样式，实现更灵活的控制。

例如，在 SCSS 中：

@for $i from 1 through 10 {  tr.row-#{$i} {    background-color: if($i % 2 == 1, #f2f2f2, #ffffff);  }}

然后 HTML 中为每一行加上对应的类名：

......

优点：样式可定制性强，适合需要根据不同行数应用不同样式的复杂表格。缺点：需要手动添加类名，或者后端/前端动态生成；不适用于动态数据长度不确定的情况。

总的来说，这三种方法各有适用场景：

想快速实现且结构简单 → 用 tr:nth-child(odd)表格结构较复杂或有干扰节点 → 改用 tr:nth-of-type(odd)使用预处理器并需要精细控制 → 结合类名 + 循环生成样式

基本上就这些方法，不复杂但容易忽略细节。

以上就是CSS选择器实现斑马纹表格的三种方法的详细内容，更多请关注创想鸟其它相关文章！

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1103027.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

程序猿的头像

程序猿签约作者

413.8K 文章
0 评论
2 粉丝
这个人很懒，什么都没有留下～
mysql如何开启事务_mysql事务开启操作方法
上一篇 2025年12月2日 12:00:06
欧盟苹果 iPhone 用户可选默认浏览器后，Brave 称其浏览器下载量激增
下一篇 2025年12月2日 12:00:10

相关推荐

发表回复

登录后才能评论
关注微信