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

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

最初我是这样设置的：

.%%payment_frequency%%
{
    display: none;

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

---

问题是，我是否可以反向执行此操作，并将“display:none”样式应用于元素，然后在需要时使用类来显示该特定元素？我已经试过了，但还没有弄明白，所以任何建议都会有帮助。

您可以创建两个类

.show{
  display:block;
}

和其他类

.hide{
display:none;
}

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

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

---

您可以使用更具体的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>

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

---

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

您可以使用

！重要信息

覆盖内联样式的规则：。我想说的是，尽管你应该尽量避免使用这个（除非它是一次性的电子邮件模板），因为它可能会导致维护噩梦或未来的样式问题我不确定你正在使用什么来预处理你的电子邮件，但与其隐藏你不想显示的元素，你为什么不干脆不包括你不想展示的元素呢。这样，您就不必在双重类中混日子了。@Milanzor我们使用Silverpop发送电子邮件，但在实现中，我们必须使用他们的Transact产品，它不允许动态内容。我们有24个相同模板的不同版本，其中包括一些小的更改，因此将使用相同的模板，并使用变量提要来显示该电子邮件所需的特定元素。这比管理24封电子邮件要容易得多，因为其中只有一个表行是不同的。@Sam您必须使用CSS特性来否决您的display:none类。首先，我要说的是，可能有一些电子邮件客户端无法正确地对CSS进行交互（有些甚至会将其删除），众所周知Outlook的HTML+CSS电子邮件呈现非常糟糕，因此请小心。我将在回答中澄清总共有11个元素需要在不同的点上进行更改，并将这些元素添加到他们共享的3个主要主题中。我可以把3个主题的变量字段放在一起，这样就可以隐藏其他主题，只需要反过来使用。我发现的问题是Outlook只能识别每个元素的一个类，所以我不能同时使用“年度”和“ForceShowAnnual”。如果我可以的话，我原来的方法会起作用，但不幸的是，我只限于一个类。我希望Outlook会出现问题，因为什么时候它不会！如果无法使用此解决方案，则必须尝试在其上获取内联'style=“display:none；”。就是这样，或者联系制作软件/CMS的开发人员，提供一种你想要的方式。我必须选择内联选项，我现在正在尝试解决变量，以便在需要时隐藏它（或者显示所有隐藏的变量）。如果说Outlook没有引起足够的问题，Gmail已经造成了更大的问题，因为它完全去掉了页眉和页脚，所以我不能在那里使用任何类！谢谢你在这方面的帮助是的，Gmail也有自己的方式，消除“安全风险”。你最好的床是通过Melmipps'烧杯（我想这就是他们以前称之为）的方法来处理你的电子邮件，或者基础“内联”，所以所有的CSS都被移动到内联样式属性中，给你在所有电子邮件客户端中最好的呈现。但我明白，在您当前的设置中，这可能是一个挑战。

.Annual{
    display: none;
}

.Annual.ForceShowAnnual{
    display: block;
}