代码片段 → CSS → 使用 CSS3 为表格添加斑马线效果 使用 CSS3 为表格添加斑马线效果 Chris Coyier 于 2009年8月22日 tbody tr:nth-child(odd) { background-color: #ccc; }
很棒，确实为我节省了一些搜索时间。
这对我不太有效，但是 PHP 的方法效果很好。
CSS3 斑马线效果是更好的解决方案！为什么？以下是正确的概念
1. PHP 生成 HTML 作为输出，不应该关心元素的外观。
2. CSS 的作用是“关心”元素的外观。
或者
http://webbytedd.com/b/color-rows/
CSS3 可能无法在 IE9 或某些旧版浏览器上运行。
不明白它是如何工作的……
tbody tr:nth-child(odd)
基本上，您选择 tbody 中所有奇数行的 tr。
类似于
tbody
->tr(selected)
->tr
->tr(selected)
所以，无论表格有多少行，它总是会有一行带颜色，然后下一行是白色。
@Dyllon 和 @Artem，这里有一个简单的演示解释了如何使用此代码，以及一个正在使用的实时示例。
http://webdesignandsuch.com/2010/08/add-zebra-striping-to-a-table-with-css3/
遗憾的是……IE 不支持。
遗憾的是……您正在使用 IE。
可以使用 jQuery 的 addClass 方法实现。
没错：但需要更多代码行。
糟糕的 Explorer 不支持
我敢打赌，那些说它不起作用的人使用的浏览器是不支持的。:D
我的意思是，*使用* 不支持的浏览器。
只想说声感谢所有这些酷炫的技巧和窍门。我之前用过 css 斑马线技巧，但没想到在 css 前缀中加上 tbody，这样我就能更好地定位悬停等效果。
如何在可排序的 PHP 表格中保持一致的斑马线模式？
嘿，在这 12 年里你找到答案了吗？
这太棒了，可惜 IE 不支持。因此，我使用 PHP 或 jQuery 的方法，直到 IE 醒来并关闭那个糟糕的浏览器。
我来自你们的未来，现在是 2016 年，它仍然没有关闭！
太棒了，谢谢！
我想使用它，但是我的表格行内嵌套了表格，有人知道如何让它跳过嵌套的行/列吗？谢谢！
我认为它不支持 Internet Explorer，
但它很有用。
关于可以使用 jQuery 的问题，它还会添加很多类，（如果规模扩大，并且有数百行）它会添加很多类。反过来，这最终会不会导致代码膨胀甚至减慢页面速度？（不会很多，但有一点）所以我猜 Chris 只是想使用最有效的方法来使用代码，或者可能只是第一个想到的方法，或者仅仅是偏好。只是一个想法 :)
在我的情况下，这很完美。
感谢您提供如此简洁的解决方案。:-)
谢谢！它起作用了 :))
我添加了数量查询，所以斑马线效果*仅在*表格的行数超过一定数量时才会生效：https://codepen.io/cadars/pen/PoKrdjp