html - 如何在显示 : none? 后使用类来显示特定元素

Question

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

最初我是这样设置的:

.%%payment_frequency%%
{
    display: none;

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

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

Answer 1

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

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

将编译为，例如:

.Annual{
    display: none;
}

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

我想你有这样一张 table :

<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”类添加到要显示的行。