Question

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

最初我的设置如下：

.%%payment_frequency%%
{
    display: none;

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

问题是，我可以反向执行此操作并将“display：none”样式应用于该元素，然后使用类在需要时显示该特定元素吗？我已经尝试但未能弄清楚这一点，所以任何建议都会有所帮助。

Answer 1

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

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

将编译为，例如：

.Annual{
    display: none;
}

所以为了拥有一定的“年度”。 rows显示而不是hide，创建一个更具体的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选择器相对，使得它取代了display：none;

此解决方案确实需要您添加额外的＆＃34; ForceShowAnnual＆＃34;类要显示的行。

Answer 2

您可以创建两个类

.show{
  display:block;
}

和其他班级

.hide{
display:none;
}

或者您可以使用css可见性属性

.visible{
visibility: visible;
}
.non-visible{
visibility: hidden;
}

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

2 个答案: