是否有可能编写一个“全部或无”的CSS规则？

Question

想象一下这样的场景:用户的电子邮件客户端对CSS的支持有限。(它要么摘掉内容，阻止链接CSS，要么在发送前对电子邮件进行消毒。)

我想应用一条规则，例如转换链接的视觉形状，使其像一个带有渐变背景和白色文本的按钮。

一些电子邮件客户端接受颜色:设置为白色文本，但去掉背景。这导致链接具有白色，但没有背景，它将与电子邮件正文的白色背景相对应，从而导致不可读链接。

是否有可能创建一个CSS规则，只有当所有规则都可以应用时才是有效的？

比如“设置(颜色和背景)或者什么都不做”？

.all-or-nothing(set all or none) {
 color: #fff;
 background:linear-gradient(...);
}

谢谢!

Answer 1

也许您可以尝试一下@supports的规则，尽管我可以想象许多邮件客户端将不支持它。

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports

@supports (color: #fff) and (background: linear-gradient(...)) {
   .all-or-nothing {
      color: #fff;
      background: linear-gradient(...);
   }
}