如何确定媒体查询和 CSS 之间的优先级？答案

【问题标题】：How can I decide the priority between media queries and css?如何确定媒体查询和 CSS 之间的优先级？
【发布时间】：2014-06-26 17:44:36
【问题描述】：

我有一个 page.css 用于从母版页到其他页面。在该文件中，我有一个 div 属性：<div class="classDivOne">Hello</div> 那就是：

.classDivOne{
margin-top:5px;
}

现在，使用 Windows 资源管理器一切都很好。

我需要修复 margin-top:0px;，而不是 Chrome。

我以这种方式使用媒体查询（在母版页内）：

<style type="text/css">
   @media screen and (-webkit-min-device-pixel-ratio:0) {
        .classDivOne{
            margin-top:0px;
        }
   }
</style>

但我注意到文件 css 是主要选择，并且我的 chrome 媒体屏幕未使用。如果我放入 div style="margin-top:0px" 我会得到相同的结果。

如何为该 div 设置 css 选择的优先级？还是有其他解决方案？

【问题讨论】：

对于现代版本的 IE，您不需要这样做。对于旧版本，您可以使用仅限 IE 的条件 cmets。
你想定位特定的浏览器吗？或者您想优先考虑一个 CSS 属性而不是另一个？
它正在工作 jsfiddle.net/fKgmR/1 请告诉我们不工作的小提琴。
我在css中为那个div使用了一个类。它适用于所有浏览器。我注意到只有在 chrome 中该属性会产生不同的输出，所以我需要说“当使用 chrome 时使用不同的 margin-top”。为此，我使用了媒体查询，但浏览器仍然在 che css 标准中设置了 margin-top。为什么？我确信媒体查询有效，因为在 classDivOne 中未定义的其他属性也有效！
虽然 SO 是关于人们提出问题和其他人提供答案，作为帮助他人的记录，但对我来说，简单地提供答案并不符合 OP 的最佳利益也没有其他人偶然发现了这一点。正确答案应该是：停止你在做什么。阅读教程，了解如何更好地编写 HTML 和 CSS。再次开始。您的问题的确切答案可能会暂时解决您的问题，但它是在射击自己的脚以防止您的背部受伤。任何阅读此书、寻求建议的人都会这样做，这是一种巨大的伤害。

标签： jquery html css media-queries

【解决方案1】：

这样写

<style type="text/css">
   @media screen and (-webkit-min-device-pixel-ratio:0) {
        .classDivOne.classDivOne{
            margin-top:0px;
        }
   }
</style>

或

<style type="text/css">
   @media screen and (-webkit-min-device-pixel-ratio:0) {
        .classDivOne{
            margin-top:0px !important;
        }
   }
</style>

【讨论】：

【解决方案2】：

CSS：

<style type="text/css">
   @media screen and (-webkit-min-device-pixel-ratio:0) {
        .classDivOne{
            margin-top:0px !important;
        }
   }
</style>


! important

用于使属性的优先级高于其他。

【讨论】：

【解决方案3】：

<style type="text/css">
@media
only screen and (-webkit-min-device-pixel-ratio: 0),
only screen and (   min--moz-device-pixel-ratio: 0),
only screen and (     -o-min-device-pixel-ratio: 0),
only screen and (        min-device-pixel-ratio: 0),
only screen and (                min-resolution: 0dpi),
only screen and (                min-resolution: 0px) { 

  .classDivOne{
            margin-top:0px !important;
        }

}

/*OR*/

@media screen and/*!*/(-webkit-min-device-pixel-ratio:0) { 
        .classDivOne{
            margin-top:0px !important;
        }

 }
</style>

【讨论】：