min-width媒体查询中display:none不生效无法隐藏菜单图标问题

核心错误原因 #

• 语法错误：CSS媒体查询规则中，and关键字与后续的条件括号之间必须保留空格，你当前代码里and(min-width: 768px)的写法不符合规范，浏览器会直接判定该媒体查询无效，块内所有样式都不会被加载。
• 选择器错误：你使用的.nav-toggle .nav-close为后代选择器，仅会匹配.nav-toggle节点内部的.nav-close元素，无法匹配.nav-toggle本身，所以汉堡菜单图标不会被隐藏。

修复代码 #

/* and后添加空格，选择器用逗号分隔两个独立类 */
@media screen and (min-width: 768px) {
  body {
    margin: 0;
  }

  .nav {
    height: calc(var(--header-height) + 3rem);
  }

  /* 同时命中汉堡图标和关闭按钮两个独立元素 */
  .nav-toggle,
  .nav-close {
    display: none;
  }
}

可选排查项 #

如果修改后仍不生效，可按以下顺序排查：

• 打开浏览器开发者工具的元素面板，选中.nav-toggle和.nav-close元素，查看样式列表中是否出现上述display:none规则，若规则被划掉说明存在更高优先级的样式覆盖，调整选择器权重即可。
• 确认页面没有其他同条件的媒体查询在后续覆盖了当前样式，CSS规则遵循后写优先的加载逻辑。

内容的提问来源于stack exchange，提问作者Haider Abbas Abidi