为何max-width:815px媒体查询会覆盖后声明的655px媒体查询样式？

你遇到的问题核心是：当屏幕宽度≤655px时，两个媒体查询的条件都会触发（因为655<815），按CSS规则，选择器特指度相同的情况下，后声明的655px规则应该覆盖先声明的815px规则，但实际却反过来，这大概率是以下两个原因导致的：

1. margin:0 auto的生效前提不满足 #

margin:0 auto实现水平居中必须满足两个条件：

• 元素是块级元素（比如display:block、display:inline-block，如果是行内元素display:inline，margin:auto完全不生效）
• 元素设置了明确的宽度（width值不能是auto，否则元素会占满父容器宽度，margin:auto失去意义）

如果这两个条件没达标，margin-right:auto会被浏览器忽略，相当于这个属性根本没设置，此时815px规则里的margin-right:5px就会继续生效，看起来像是被覆盖了。

2. 布局属性限制了margin的生效 #

如果元素设置了float、position:absolute/fixed这类属性，margin:auto的逻辑也会失效，此时margin-right:auto同样不会生效，原有的margin-right:5px自然会保留。你尝试设置margin-right:unset无效，也可能是这类布局属性在干扰。

解决方法 #

• 先检查.item的display属性，改成block或inline-block（如果需要保持行内特性）
• 给.item设置明确的宽度，比如width:90%或固定像素值
• 可以在655px的媒体查询里用更明确的写法，直接覆盖margin-right：

  @media (max-width: 655px){
    .page .item {
      display: block;
      width: 90%;
      margin: 0 auto;
      /* 或者单独明确设置，确保覆盖 */
      margin-right: auto;
    }
  }
  

内容的提问来源于stack exchange，提问作者Lilly