CSS nth-child 选择器在 Outlook/Gmail 中不起作用

发布于 2025-01-14 14:01:24 字数 360 浏览 1 评论 0原文

我在执行某些操作时发送邮件，其中一些包含 HTML 表。我想对表中 2 行中的 1 行进行着色，为此我使用以下规则：

tr:nth-child(even) {
  background-color: #c4409720;
}

在 mailhog 中，输出是完美的并且可以工作，但是在 Outlook 或 Gmail 中查看电子邮件时，行没有着色。请注意，我不知道我会提前有多少行，因为邮件模板是用列表和循环填充的。

我猜这些邮件客户端不支持选择器？

那么我怎样才能以那些邮件客户端能够理解的方式实现这一点呢？

提前致谢！

原文

I'm sending mails when performing some actions, and some of them contain an HTML table.
I wanted to color 1 line out of 2 in the table and for that I'm using the rule below :

tr:nth-child(even) {
  background-color: #c4409720;
}

In mailhog the output is perfect and it works but once looking at the email in Outlook or Gmail the rows are not coloured. Note that I don't know how many rows I'll have in advance since the mail template is populated with a list and a loop.

I guess the selector is not supported in those mail clients ?

So how could I achieve this in a way that will be understood by those mail clients ?

Thanks in advance !

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

岁吢 2025-01-21 14:01:24

正如已经指出的，:nth-child 在 Gmail 和 Outlook、Yahoo 或 Protonmail（PM iOS 除外）中不受支持。

您可以通过相邻的选择器组合器（例如 tr + tr）手动实现此目的，该组合器会添加大多数 Gmail（不是没有 Gmail 地址的 Gmail 帐户）以及 Yahoo（请参阅 https://www.caniemail.com/features/css-selector-adjacent-sibling/）

<style type="text/css">
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr, 
    tr + tr + tr, 
    tr 
    {background-color:red}
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr,
    tr + tr
    {background-color:transparent}
</style>

使用以下表结构进行测试：

        <table>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
        </table>

As has been pointed out, :nth-child is not supported in Gmail and Outlook, or Yahoo or Protonmail (except PM iOS).

You could achieve this manually via the adjacent selector combinator (e.g. tr + tr), which adds most Gmails (not Gmail accounts without a Gmail address) as well as Yahoo (see https://www.caniemail.com/features/css-selector-adjacent-sibling/)

<style type="text/css">
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr + tr + tr, 
    tr + tr + tr + tr + tr, 
    tr + tr + tr, 
    tr 
    {background-color:red}
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr + tr + tr,
    tr + tr + tr + tr,
    tr + tr
    {background-color:transparent}
</style>

Tested with the following table structure:

        <table>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
            <tr><td>And stuff</td></tr>
        </table>

回复收藏 0 原文

~没有更多了~