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是主要选择，并且我没有使用我的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>

Answer 2

CSS：

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


! important

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

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

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

3 个答案: