jquery - 我如何决定媒体查询和CSS之间的优先级？

Question

我有一个从母版页到其他页面的 page.css。在该文件中，我有一个 div 属性:<div class="classDivOne">Hello</div>即:

.classDivOne{
margin-top:5px;
}

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

我需要使用 Chrome 而不是修复 margin-top:0px; .

我以这种方式使用媒体查询(在母版页内):

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

但我注意到文件 css 是主要选择，我的 media screen for chrome 没有被使用。如果我放入 div style="margin-top:0px"我得到了相同的结果。

如何为该 div 设置 css 选择的优先级？或者有不同的解决方案？

Answer 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>