媒體查詢不互相覆蓋

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>