CSS多媒体查询问题：部分规则生效，其余规则不生效

可能原因1：选择器优先级被全局样式覆盖 #

如果全局CSS中已经为img设置了优先级更高的样式（比如带ID的选择器、内联样式，或更复杂的复合选择器），媒体查询里的.submenu img会被覆盖。

比如全局存在这类代码：

#content-area img {
  width: 300px;
  height: 200px;
}

或者img标签带有内联样式：

<img src="example.jpg" style="width: 300px;">

临时排查可以用!important验证（不推荐长期使用，优先级过高会增加维护成本）：

@media screen and (max-width:1200px) {
  .submenu img {
    width: 250px !important;
    height: 180px !important;
  }
}

正式解决建议使用更贴合DOM结构的具体选择器，比如.submenu .item-container img（根据实际嵌套层级调整）。

可能原因2：浏览器缓存未更新 #

Edge可能缓存了旧的CSS文件，导致修改后的样式未加载。可以通过以下方式刷新：

• 按Ctrl + Shift + R强制刷新页面
• 打开开发者工具（F12），在「Network」选项卡勾选「Disable cache」，再刷新页面

可能原因3：DOM结构与选择器不匹配 #

检查HTML结构，确认img确实是.submenu的直接或间接子元素，同时核对.submenu类名是否拼写正确（注意大小写）。比如如果DOM结构是：

<div class="submenu">
  <div class="img-box">
    <img src="example.jpg">
  </div>
</div>

.submenu img是可以匹配的，但如果img不在.submenu的嵌套范围内，选择器就会失效。

可以用Edge开发者工具（F12）选中目标img，查看「Styles」面板：如果媒体查询的样式被划掉，说明被更高优先级样式覆盖；如果根本没显示该样式，说明选择器未匹配或媒体查询条件未触发。

可能原因4：媒体查询条件未触发 #

确认当前浏览器窗口宽度确实≤1200px，有时候窗口缩放比例、显示器分辨率设置会导致实际可视宽度不符合条件。可以在开发者工具的「Toggle device toolbar」（Ctrl+Shift+M）中直接设置窗口宽度为1200px，测试样式是否生效。

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