两个CSS媒体查询互相覆盖

Question

我有2个媒体查询，如下所示！

@media screen and (max-width: 800px){
  .rightlist{
    margin-top: 0px !important;
  }

}


@media (max-width: 1000px) and (min-width: 801px){
  .rightlist{
    margin-top: -10px !important;
 }

}

当两个媒体查询在一起时，上述查询将覆盖下面的查询。是否有人知道修复此问题？谢谢你的帮助！

Answer 1

使用此功能，此css将应用于最高1000px的屏幕，但只要您达到800px，您的先前媒体查询将被应用

@media (max-width: 1000px){
  .rightlist{
     margin-top: -10px !important;
  }
}