奇数和偶数行上的不同CSS样式

当我迭代集合时，是否有可能仅使用CSS为动态生成的表格设置奇数行和偶数行上的不同样式，而无需在每行上设置正确样式？奇数和偶数行上的不同CSS样式

2011-02-23 per_jansson

看到这里的'第n-child'示范答案：http://stackoverflow.com/questions/5080699/using-css-even-and-odd-pseudo-selectors-with-list-items – thirtydot 2011-02-23 20:10:01

你不应该混淆Java和JavaScript（它被重新授权给你）。请参阅：http://stackoverflow.com/questions/245062/whats-the-difference-between-javascript-and-java – thirtydot 2011-02-23 20:16:09

jQuery的+1，它存在的一个原因，真的没有任何有效的理由不使用它如果你使用JavaScript开始。 – 2011-02-24 03:01:45

我不知道这会工作的跨浏览器使用jquery，我宁愿jQuery的自己，但CSS-只有这应该做的伎俩：

tr:nth-child(even) { ... } 
tr:nth-child(odd) { ... }

来源

2011-02-23 20:09:31

嗯，这是跨浏览器的浏览器不吸吮... – 2011-02-23 23:13:03

您可以使用nth-child选择器http://reference.sitepoint.com/css/pseudoclass-nthchild，尽管它不受所有浏览器支持。

您也可以作为描述What is the best way to style alternating rows in a table?

来源

2011-02-23 20:08:47

这是'nnth-child' ... =） – 2011-02-23 20:18:03

哎呦，感谢您的支持，感谢 – 2011-02-23 22:04:51

你可以用CSS3做到这一点。

tr:nth-child(2n+1) /* targets all odd rows */ 
tr:nth-child(2n) /* targets all even rows */

来源

2011-02-23 20:09:56 Intelekshual

，你可以简单地使用jQuery和喜欢

$("tr:nth-child(odd)").addClass("odd");

和样式使用CSS将其添加类奇数行作为

.odd{background-color:#657383}

来源

2011-02-24 02:23:04 paul

奇数和偶数行上的不同CSS样式

回答

相关问题