css - 两个 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;
  }
}