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

Question

I have a page.css used from the master page to others pages. In that file I have a property for a div: <div class="classDivOne">Hello</div> that is:

.classDivOne{
margin-top:5px;
}

Now, with windows explorer everything is fine.

Instead with Chrome I need to fix margin-top:0px; .

I used media queries (inside master page) in this way:

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

but I noted that the file css is the primary choice and my media screen for chrome is not used. If I put into the div style="margin-top:0px" I have the same result.

How can I set the priority into the choice of css for that div? Or there is a different solution?

Answer 1

write this way

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

or

<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 

is used to make the priority of property higher than other.

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>