如何確定媒體查詢和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是首要選擇，並且未使用我的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>