默认@media查询样式

Question

媒体查询的特殊性是什么？ 为什么删除封装最小屏幕宽度的媒体查询会覆盖小屏幕的媒体查询？

<style>
@media only screen and (max-width: 600px) {

  table,tr,td {
    width:100%; 
    margin:0 0 ;
/* background-color: #CCFF33 !important; */
  }

img {
        max-width: 100%;
        height: auto;
  }
}
@media only screen and (min-width: 600px) { 
  table,tr,td {  /* removing this encapsulation yields fix width for */
              margin:0 auto; /* all screens */
              width: 600px;
  }
}
</style>

Answer 1

媒体查询的特殊性是什么？

媒体查询对特异性没有任何影响。

为什么删除封装最小屏幕宽度的媒体查询会覆盖小屏幕的媒体查询？

因为特异性是相同的-您的两个规则都使用简单的元素选择器-因此归结为规则的顺序，后一个则为准。