为何媒体查询中ul的display:none生效，div.menu的display配置不生效

架构老林

2026-10-25

问题根因

该问题和媒体查询逻辑无关，核心是CSS同权重规则的层叠顺序覆盖导致的：
1. 媒体查询内写的nav .menu、代码后半段基础样式里写的nav .menu，两个选择器权重完全一致（元素选择器权重1 + 类选择器权重10，总权重11）。
2. CSS层叠规则明确：选择器权重相同时，代码位置越靠后的样式优先级越高，会覆盖前面同选择器的同属性配置。
3. 当前代码把媒体查询块写在最前面，基础样式里的nav .menu { display: none; }位于媒体查询块的后方，直接把媒体查询内设置的display: inline覆盖了。
4. 同媒体查询内的width、background-color能正常生效，是因为基础样式段没有针对.menu设置这两个属性，不存在同属性的覆盖冲突。

修复方案

方案1：调整代码书写顺序，将媒体查询块移动到所有基础nav相关样式的后方。保证媒体查询内的规则处于层叠顺序的靠后位置，同权重下可以正常覆盖基础样式配置，调整后的代码结构参考：

/* 定义大屏默认基础样式 */
nav {
  margin-bottom: 100px;
  width: 100vw;
  height: 3vw;
  background-color: crimson;
}

nav .menu {
  display: none;
}

/* 定义小屏适配规则 */
@media screen and (max-width: 950px) {
  nav ul {
    display: none;
  }
  nav .menu {
    width: 100px;
    display: inline;
    background-color: #fff;
  }
}