响应布局在css中使用！important

Question

@media screen and (max-width: 480px){
.box{
   color:orange !important;
}
}

.box{
   color:red;
}

在移动广告中，.box将为蓝色，但如果没有!important则无效。如果属性未在媒体查询括号外声明，则可以不放置!important。如何避免使用!important？

Answer 1

将以下媒体规则用于桌面css规则

.box{
   color:red;
}

@media screen and (max-width: 480px){
    .box{
        color:blue; /* should be blue as per OP */
     }
}

Answer 2

只需更改

的顺序

@media screen and (max-width: 480px){
    .box{
        color:blue !important;
    }
}

.box{
   color:red;
}

到

.box{
   color:red;
}

@media screen and (max-width: 480px){
    .box{
        color:blue;
    }
}

因为如果你使用相同的selector，那么将使用的style是较新的（从上到下）