如何在显示后使用类显示特定元素：无？

Question

我正在创建一封包含不同变量字段的电子邮件，这些字段将由电子邮件客户端推送，然后将更新一个类的名称。

最初我是这样设置的：

.%%payment_frequency%%
{
    display: none;

将更新为分期付款或年度，然后将其应用于不应显示的各种 HTML 元素。这适用于某些电子邮件客户端，但不适用于 Outlook，我发现它在 Outlook 中不起作用，因为由于 3 个不同的变量选项和 3 个单独的类，某些元素具有多个类。

问题是，我可以反向执行此操作并将“显示：无”样式应用于元素，然后在需要时使用类来显示该特定元素吗？我已经尝试过但无法解决这个问题，所以任何建议都会有所帮助。

Answer 1

您可以使用更具体的 CSS 类来再次显示元素。 您提供的代码：

.%%payment_frequency%%
{
    display: none;
}

将编译为，例如：

.Annual{
    display: none;
}

所以为了让某些“.Annual”行显示而不是隐藏，创建一个更具体的 CSS 类来实际显示它。

我想你有一张这样的桌子：

<table>
    <tr class="Annual">
        <td>Some stuff</td>
        <td>Some more stuff</td>
    </tr>
    <tr class="Annual ForceShowAnnual">
        <td>Some stuff</td>
        <td>Some more stuff</td>
    </tr>
</table>

我添加了 ForceShowAnnual 类，因此我们可以执行以下操作：

.Annual{
    display: none;
}

.Annual.ForceShowAnnual{
    display: block;
}

这意味着 .Annual.ForceShowAnnual 是一个更具体的 CSS 选择器，与 .Annual 选择器相对，使其覆盖显示：无；

此解决方案确实需要您向要显示的行添加额外的“ForceShowAnnual”类。