CSS媒体查询设置display:none不生效，样式被划掉如何解决？

你的.nav__btn在大屏下的隐藏样式被划掉，主要是优先级冲突或加载顺序问题，以下是具体解决方向：

• 优先级不足被覆盖
  如果页面里存在其他针对.nav__btn的样式（比如带ID的选择器、行内样式，或者同优先级但后定义的普通样式），会把媒体查询里的display: none覆盖。
  解决方法：提升当前样式的优先级，比如给选择器加父级限定：

  @media (min-width: 768px) {
    .nav .nav__btn { /* 假设父元素类是nav */
      display: none;
    }
  }
  

  万不得已时也可以用!important（不推荐滥用）：

  @media (min-width: 768px) {
    .nav__btn {
      display: none !important;
    }
  }
  

• CSS文件加载顺序搞反
  要是你的「media file」是在「application file」之后引入的，那里面的基础.nav__btn样式会覆盖媒体查询的隐藏规则（同优先级下后加载的样式生效）。
  解决方法：调整引入顺序，把「application file」放在「media file」后面加载。

• 其他排查点

  • 检查页面元素的类名是否和.nav__btn完全一致，有没有拼写、大小写错误；
  • 确认媒体查询的语法无误（你的代码里看起来没问题，但可以再核对min-width、括号、单位这些细节）。

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