如何在html表格上创build斑马条纹，而不使用javascript和奇数类的代？

我想斑马条纹一个HTML表，而不使用任何js的东西或编写服务器端代码生成表/行的奇数类。 是否有可能使用原始的CSS？

Answer 1

有可能，CSS3select器：

tr:nth-child(even) { background-color: red; } tr:nth-child(odd) { background-color: white; } 

根据caniuse.com ，现在每个浏览器都支持它。

Answer 2

如果你正在改变的是背景颜色，那么下面的代码就可以工作，其中test.gif是一个40px高的图像，顶部20px一种颜色，最底部的20像素是另一种颜色。 如果你需要改变任何其他的CSS属性，你几乎卡住了。

 table { background: url(test.gif) top; } table tr { height: 20px; } 

Answer 3

http://www.w3.org/Style/Examples/007/evenodd CSS 3 nth孩子。 由于浏览器支持是有限的，你可以重现Sizzle的行为（包括在，例如jquery）

Answer 4

（在CSS <= 2）没有。 不幸的是，没有任何select器（在CSS <= 2），根据位置（根据它的父母的孩子中的数字）来操作，我相信你只需要用CSS就可以做到这一点。

注意自己：已经阅读了CSS3！

Answer 5

在http://www.w3.org/TR/css3-selectors/#structural-pseudos你可以find使用nth-child的解释和例子：;

 tr:nth-child(2n+1) /* represents every odd row of an HTML table */ { background-color: green; } tr:nth-child(odd) /* same */ { background-color: green; } tr:nth-child(2n+0) /* represents every even row of an HTML table */ { background-color: pink; } tr:nth-child(even) /* same */ { background-color: pink; } 

与浏览器兼容性祝你好运 – 你需要它。
有黑客使其在IE浏览器（使用JS） – 我会离开筛选给你。