如何使用 *CSS2* 而不是 CSS3 选择 HTML 表格中的每一行？ [复制]

Posted 2023-03-05

【中文标题】如何使用 *CSS2* 而不是 CSS3 选择 HTML 表格中的每一行？ [复制]

【英文标题】：How do I select every other row in an HTML table using *CSS2*, not CSS3? [duplicate]

【发布时间】：2013-03-09 16:58:39

【问题描述】：

如何使用 CSS2 选择 html 表格中的每隔一行？如果这不可能，也欢迎 CSS3 的答案。

【问题讨论】：

这个问题不是那个问题的重复，即使答案很合适。如果有人搜索更一般的问题，他们不会被颜色主题混淆。建议因为另一个不同问题的答案是适当的答案，这意味着重复，这是不合理的。在我的书中重复的问题/答案是可以的。我已经看到了完全不同的质量问题/答案集，理论上应该完全重叠，但它们没有。具体来说，有人应该说没有我正在寻找的 CSS2 解决方案。

每个人都忽略了我专注于简单答案的问题。请告诉我是否没有 CSS2 解决方案！ ;)

【参考方案1】：

遗憾的是，没有纯粹使用 CSS2 的解决方案。

不过，您可以在 CSS3 中使用 :odd 和 :even 选择器来确定每一行。

tr:nth-child(even) 
   // if it's even - rows 2,4,6 etc - apply styles


tr:nth-child(odd) 
   // if it's odd - rows 1,3,5 etc - apply styles

所有主流浏览器都支持nth-child even/odd，但IE8及之前的浏览器不支持。

如果您想要一种使其适用于 IE8 及更早版本的方法，请查看 this article 关于让 nth-child 无处不在的工作。

【讨论】：

感谢您的帮助！

【参考方案2】：

tr:nth-child(even) 
   /* stub */

或

tr:nth-child(odd) 
   /* stub */

See here for browser support

【讨论】：

请注明这是CSS3还是CSS2。

nth-child 是一个 CSS3 选择器