内联样式会优先于媒体查询吗？答案

【问题标题】：Will inline-styling take precedence over a media query?内联样式会优先于媒体查询吗？
【发布时间】：2016-04-21 09:37:50
【问题描述】：

我之前使用 html 和内联 css 构建了电子邮件。我最近决定添加媒体查询以使它们更适合移动设备。但是我想知道内联样式（css）是否会优先于媒体查询。

例如：如果我对 iPhone 进行媒体查询，电子邮件会显示来自适当媒体查询的样式还是内联样式？

谢谢！！

【问题讨论】：

标签： html css media-queries html-email

【解决方案1】：

当浏览器使用您的页面时，它会像使用文本流一样使用它。它将首先遇到您的 <script> 和 <link> 标签，然后下载并执行 JavaScript 和/或 CSS 文件。然后浏览器将继续向您的<body> 发送流。如果您有内联样式，则必须由浏览器 b/c 重新绘制页面，因为它在 HTML 中遇到了新的 CSS。内联样式具有最高优先级，通常应避免使用，但它们会覆盖外部 CSS 文件中的内容。

【讨论】：

【解决方案2】：

当您定义内联样式时，它可用于所有设备和您编写的任何媒体查询集。

并且内联样式具有最高优先级，因此在您的情况下显示的样式将具有内联样式。

如果您想覆盖内联样式，则需要使用 !important 在媒体查询中添加样式。

供参考 - CSS Specificity

【讨论】：

也在回答这个问题，但这个答案很好。这是我在 JSFiddle 上展示的一个示例：jsfiddle.net/26xgnw7b
同上。我还要提到这就是为什么应尽可能避免内联样式的原因。调用!important 来覆盖内联样式是非常丑陋的，可能会导致问题。
@Aeolingamenfel - 感谢您的示例。这将是 Steez 的一个很好的参考。
简短，甜美，切中要害。很好的答案，如果可以的话，我会再次投票。
@Gortonington - 谢谢。