我正在尝试创建一个具有斑马条纹样式的网络邮件模板,该模板在不同的客户端上看起来相同。这个模板来自一个第三方应用程序(我无法控制(,该应用程序迭代候选人,我唯一能做的就是为每个候选人创建一个部分的伪代码,类似于这个伪代码:
for(candidate of candidates) {
<table class="zebra" width="600" border="0" cellspacing="0" cellpadding="0" align="center" style="border-collapse:collapse">
<tbody>
<tr>
<td style="padding-left:28px;"> </td>
<td class="colored-dome" valign="top" width="600" style="text-align: left; font-family:Arial; text-transform:uppercase; color:#ffffff; text-decoration:none; font-size:18px; padding:5px 38px 5px 10px;">
<span>^candidate.role^</span>
</td>
<td style="padding-left:28px;"> </td>
</tr>
</tbody>
</table>
}
正如你在这里看到的,我正在使用一个css类:
table.zebra:nth-child(odd) td.colored-dome {
background-color:#8274b6;
}
table.zebra:nth-child(even) td.colored-dome {
background-color:#9d9d9d;
}
因为我不能使用第 n 个孩子:内联选择器。所以我尝试了:
<style> tag inside <head> ,
<style> tag inside <body> (as an attempt),
css file from working remote url,
但是这些解决方案都不适用于Outlook 2010,Hotmail,Gmail。所以我的问题是:有没有办法为这些客户创建一个有效的网络邮件斑马条纹?我们可以说这些解决方案永远不会适用于Hotmail,Gmail或Outlook吗?
第n个孩子在Outlook或Gmail和其他一些客户端中不起作用。
- https://www.campaignmonitor.com/css/selectors/nth-child/
确保这始终有效的解决方案是为这些电子邮件客户端内联您想要的样式。