当媒体查询覆盖其他媒体查询时

Question

我在登陆页面中创建了一系列特定元素的查询。

因此，对于我的HTML，我有以下内容：

<div class="hsContent">
   <article> here is my awesome content. boom! </article>
</div>

这将是上述DIV的最初风格：

 .hsContent {
    max-width: 600px;
    position: absolute;
    left: 25%;
    right: 25%;
    top: 10%;
    z-index: 10;
}

因此，我编写了一系列媒体查询，以深入到较小的屏幕大小，最小的是420 at。

    @media only screen and (min-width: 320px){
     .hsContent {
        width: 300px;
        position: absolute;
        left: 10px;
        top: 24%;
        padding: 5px 30px 30px 30px;
      }
    }

当我用Dev工具在Chrome中测试时，这很好。但是，在添加了另一个320 and宽度的媒体查询之后，然后使用Dev工具进行检查：

@media only screen and (min-width: 320px){
   .hsContent{
       width:300px;
       top: 10%; !important;
       padding-left: 10px;
       padding-right: 10px;
    }
}

...that查询被划掉，就好像它已经被覆盖(下面的屏幕上限)一样，在本例中，它被前面的420‘s宽度查询覆盖。(请注意，为了强制定位，甚至还包括了！重要的。)

下面是使用dev工具查看的媒体查询的屏幕截图 (还显示了先前对960px宽度的查询被覆盖-这当然是有意义的)

@media only screen and (min-width: 320px)
  .hsContent {
    width: 300px;
    top: 10%;
    padding-left: 10px;
    padding-right: 10px;
  }
}

那么，我做错了什么，我能做些什么来解决这个问题呢？

Answer 1

我想这就是你想要的：https://jsfiddle.net/pyexm7us/1/

我重新安排了您的媒体查询，将420px添加到其中一个查询中，并修正了语法错误：

css

.hsContent {
    max-width: 600px;
    position: absolute;
    left: 25%;
    right: 25%;
    top: 10%;
    z-index: 10;
}

@media only screen and (min-width: 320px){
   .hsContent{
       width:300px;
       background-color: red;
       top: 10%;
       padding-left: 10px;
       padding-right: 10px;
    }
}
@media only screen and (min-width: 420px){
     .hsContent {
        background-color: blue;  
        width: 300px;
        position: absolute;
        left: 10px;
        top: 24%;
        padding: 5px 30px 30px 30px;
      }
    }