媒体查询不互相覆盖

Question

我的媒体查询存在问题，因为它并不是互相覆盖。第一次迭代(max-width: 960px)工作正常，但第二个(max-width: 380px)不起作用，我不知道为什么。非常感谢帮助，谢谢。

.fb { 
 
    width: 50px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
} 
 

 
@media only screen and (max-width: 960px) { 
 

 
/* this works */ 
 

 
.fb { 
 
    position: relative; 
 
    width: 40px!important; 
 
    margin-left: 15px!important; 
 
    margin-right: 15px!important;     
 
      } 
 
} 
 

 

 
@media only screen and (max-width: 380px) { 
 

 
/* this does not work */ 
 
.fb { 
 

 
    width: 30px!important; 
 
    margin-left: 10px!important; 
 
    margin-right: 10px!important;    
 
      } 
 
}

<div class="social_container"> 
 
<a href="https://www.facebook.com/" target="_blank"><img class="fb" src= "http://placekitten.com/200/300" alt=""></a> 
 
</div>

Answer 1

你拼写错误保证金分辩请改为保证金右并删除！重要

.fb { 
 
    width: 50px; 
 
    margin-left: 20px; 
 
    margin-right: 20px; 
 
} 
 
@media only screen and (max-width: 960px) { 
 
    .fb { 
 
    position: relative; 
 
    width: 40px; 
 
    margin-left: 15px; 
 
    margin-right: 15px; 
 
    } 
 
} 
 
@media only screen and (max-width: 380px) { 
 
    .fb { 
 
    width: 30px; 
 
    margin-left: 10px; 
 
    margin-right: 10px; 
 
    } 
 
}

<div class="social_container"> 
 
    <a href="https://www.facebook.com/" target="_blank"> 
 
    <img class="fb" src="https://i.stack.imgur.com/UzPkq.jpg" alt=""> 
 
    </a> 
 
</div>

Answer 2

看到fiddle

.social_container a { 
 
    color: red; 
 
} 
 

 
@media only screen and (max-width: 960px) { 
 

 

 
.social_container a{ 
 
    color: green; 
 
} 
 

 
} 
 
@media only screen and (max-width: 380px) { 
 

 
.social_container a{ 
 

 
    color: pink; 
 
      } 
 
}

<div class="social_container"> 
 
<a href="https://www.facebook.com/" target="_blank">fb</a> 
 
</div>