Media Query未覆盖原样式：#navbar h1边框在小屏不消失

问题根源 #

你遇到的问题是CSS选择器优先级导致的：原样式里的#navbar header h1选择器，比媒体查询中的#navbar h1特异性更高。哪怕媒体查询放在样式表后面，低优先级的选择器也覆盖不了高优先级的规则，所以边框不会消失。

简单算权重：ID选择器（#navbar）占100分，元素选择器（header、h1）各占1分，原选择器总权重是102；媒体查询里的选择器是100+1=101，权重低，自然生效不了。

修复方案 #

方案1：用相同特异性的选择器（推荐） #

把媒体查询里的选择器改成和原样式完全一致，这样两者权重相同，后面的媒体查询规则就会覆盖前面的：

@media (max-width: 800px) {
  body {
    display: block;
  }

  #navbar {
    height: 300px;
    overflow: hidden;
  }

  /* 修改这里的选择器 */
  #navbar header h1 {
    width: 80%;
    margin: 0 auto;
    border: none;
  }
}

方案2：临时用!important（不推荐） #

如果不想改选择器，可以给border: none加!important强制覆盖，但这种写法会打乱CSS的优先级逻辑，后续维护容易出问题，尽量不用：

@media (max-width: 800px) {
  #navbar h1 {
    width: 80%;
    margin: 0 auto;
    border: none !important;
  }
}

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