html - CSS 选择器 - 确定从最后一个 child 开始的偶数/奇数 child

Question

仅使用 CSS，有没有一种方法可以从最后一个子元素开始并向后返回到第一个子元素来应用偶数/奇数计数？我不能为这个元素使用 JavaScript；这是针对从 Silverpop 的数据库生成的电子邮件。

我有一个包含几行需要交替背景颜色的表格。这些行是从数据库生成的，因此它们的编号从 3 到 6 行不等。最后一行总是需要是白色的，因为紧随其后的是一个灰色背景的表格，我不能让最后一行是灰色的。对于那些不支持 E:nth-of-type 的电子邮件客户端，我会有一个回退。

tr:nth-of-type(even) { gray } 适用于 3 行:

<table>
<tr></tr> (white)
<tr></tr> (grey)
<tr></tr> (white)
</table>

tr:nth-of-type(even) { gray } 不适用于 4 行:

<table>
<tr></tr> (white)
<tr></tr> (grey)
<tr></tr> (white)
<tr></tr> (grey)
</table>

Answer 1

是的，:nth-last-of-type() 的存在就是为了这个目的:

tr:nth-last-of-type(even)

但是，没有办法为不支持仅使用 CSS 选择器的浏览器和电子邮件客户端提供回退。您将需要让您的应用程序将类名添加到适当的行，并改为由该类作为目标。如果您无法修改应用程序，那么您很可能会被卡住。