如何確定媒體查詢和css之間的優先級？

我有一個page.css使用從母版頁到其他頁面。在該文件中我有一個屬性爲一個div：<div class="classDivOne">Hello</div> 那就是：如何確定媒體查詢和css之間的優先級？

.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是首要選擇，而不是用我的鉻媒體屏幕。如果我放入div style="margin-top:0px"我有同樣的結果。

如何將優先級設置爲該div的CSS選擇？還是有不同的解決方案？

來源

2014-06-26 user1938352

你不應該爲現代版本的IE做這個。對於舊版本，您可以使用僅限IE的條件註釋。 –

你想定位特定的瀏覽器嗎？或者你想優先考慮一個CSS屬性而不是另一個？ –

它的工作http://jsfiddle.net/fKgmR/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>

來源

2014-06-26 09:25:07 Amit

它與他們的解決方案一起工作！太棒了！ – user1938352

CSS：

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


! important

是用來做財產高於其他的優先級。

來源

2014-06-26 09:39:01

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

來源

2014-06-26 09:44:36

如何確定媒體查詢和css之間的優先級？

回答

相關問題