我正在使用媒体查询编写响应式电子邮件模板，但遇到了一个具体问题。
我正在使用 MailChimps 指南，因此我开始使用他们的 CSS Inliner ，但我发现一个问题，即内联 css 以某种方式覆盖并破坏了我之前在样式中使用的 CSS。
例如，这就是我所说的，这是我的非内联代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<style>
#desktop {display: block;}
#mobi {display: none !important;}
@media only screen and (max-width: 720px) {
#desktop {display: none !important}
#mobi {display: block !important}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top" id="desktop">
This is where my content goes.
</td>
<td align="center" valign="top" id="mobi">
This is where my content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
这仅供引用，这不是我的实际代码，但我希望你明白这一点。
所以我的问题是，在我使用 MailChimp 的 CSS Inliner 之后，我得到了这个:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style>
#desktop {display: block;}
#mobi {display: none !important;}
@media only screen and (max-width: 720px) {
#desktop {display: none !important}
#mobi {display: block !important}
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="20" cellspacing="0" width="600" id="emailContainer">
<tr>
<td align="center" valign="top" id="desktop" style="display: block;">
This is where my content goes.
</td>
<td align="center" valign="top" id="mobi" style="display: none !important;">
This is where my content goes.
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
在我发送测试电子邮件后，在邮件客户端中，最重要的是 Gmail，一切都错了，要么两个对象都显示了，要么#mobi 一个在移动设备上隐藏了，反之亦然。我上层 css 中的 !important 语句在样式部分是因为 #mobi 对象在 Gmail 中始终可见，除非它具有 !important 的 display:none 属性。
我尝试删除内联的重要语句，但到目前为止没有任何效果。这里有什么问题，我该如何绕过它？
最佳答案
根据CSS Specificity的规则:
Inline styles added to an element (e.g., style="font-weight:bold") always overwrite any styles in external stylesheets and thus can be thought of as having the highest specificity.
您可以在样式表中使用 !important 来增加相关样式的特异性，强制它们覆盖内联样式。不过应该是noted GMail 和其他客户端不支持媒体查询，也不支持 display 属性。
关于html - 覆盖响应式电子邮件模板的内联代码，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37214550/