如何禁用先前定义的CSS类中定义的颜色

Question

最近在编码和HTML电子邮件时，我发现雅虎！ 开始劫持某些链接和关键字，添加一个<span class='yshortcuts'> ，它会改变文本和链接的颜色，这可能会导致一些非常糟糕的渲染问题。

Yahoo!的“修复” 建议是非常难看的（在所有受影响的链接和关键字中添加一个范围） - 远非简单的通用解决方案，特别是当它们将样式应用于看似任意的文本时。

我想知道是否可以简单地骑过他们的课程，以及如何用css删除color属性。 （虽然所有主流电子邮件平台都不支持<style>块，但雅虎确实......以及不支持它的那些，优雅地忽略它。）

像<style> .yshortcuts{color:none;} </style>

我知道那个color:none; 是无效的，并不普遍。

有任何想法吗？

Answer 1

你可以试试

.yshortcuts { color: auto !important }

我不知道这会回归到什么 - 浏览器的默认颜色，或级联中的下一个颜色定义。 这取决于其他CSS规则。

如果这不起作用，我认为你必须用定义的新颜色覆盖它。

Answer 2

您可以通过CSS中更具体的选择器覆盖颜色

body #content .yshortcuts{color:inherit;}

Answer 3

要跨浏览器工作，您可以向css添加一些定义以保持颜色的定义。 例如，假设你在css中有这个：

p {color: black}
a {color: blue}

现在，我不确定你的.yshortcuts是否包装了a标签，或者是否位于a标签内，但是为了说明的目的，我将假设它们环绕着a ，所以解决方案就是改变你的css：

p, p .yshortcuts {color: black}
a, .yshortcuts a {color: blue}

基本上，你必须在css中定义color任何地方都这样做（假设Yahoo!可以对任何文本执行此操作）。 这并不像给出的其他解决方案那样优雅，但应该适用于IE6。

Answer 4

不幸的是，我发现要在大多数电子邮件客户端中获得可靠的样式，内联样式是唯一的方法。 一些删除头部声明的任何样式，一些添加自己的类，一些添加随机的额外元素 - 但通过给每个元素自己的内联样式 - 以及一些非常精彩的表 - 我已经得到它在每个主要客户端一致地呈现 - Gmail，Outlook，Hotmail，Yahoo等

本文对于了解谁支持哪些内容非常有用： http ： //www.campaignmonitor.com/css/

Answer 5

在挖掘和挖掘之后，似乎这是解决问题的最佳方法（在我看来）。

1. 在电子邮件顶部，添加此样式块。 这将解决大多数浏览器中的大多数问题。

    <style> .yshortcuts{color:inherit;} </style> 

2. 由于我们希望IE用户也很开心，因此在每个导致问题的<a>中插入带有颜色样式的跨度。 例如：

    <a href="http://google.com" style="#c912dc"><span style="#c912dc">Google</span></a> 

这应该在几乎所有情况下都能解决。

如果你有一个已编码的文件，这可能是一个痛苦，如果你已经编码的文件，你可以做一个正则表达式查找/替换它应该有助于加快速度（但你的里程可能会有所不同...适用于Textmate）：

找：

(<a[^>]*style=".*color:#(\w{6}).*".*>)(.+)(</a>)

更换：

$1<span style="color:#$2;">$3</span>$4