响应式导航栏失效求助：media query与#menu样式不生效

问题描述 #

开发响应式导航栏时遇到两个问题：

• #menu元素初始状态下display: none样式不生效
• media query完全无效果，未产生预期响应式变化

代码示例 #

HTML代码 #

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jj </title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css">
  <link rel="stylesheet" href="css/styles.css">
</head>
<body>
<header class="header" >
  <a href="#" class="logo">
    <img src="images/logo.jpg" alt=""></a>
  <nav class="navbar">
    <a href="#home">home</a>
    <a href="#products">varieties</a>
    <a href="#about us">about us</a>
    <a href="#contact us">contact us</a>
  </nav>

  <div class="icons">
    <a href="#" class="fas fa-bars" id="menu"></a>
  </div>

原CSS代码 #

.header .icons a {
cursor: pointer;
font-size: 2.5rem;
color: #333;
margin-left: 1.5rem;
}

header .icons a:hover {
color: black;
}

#menu {
display: none;
}

@media(max-width:991px) {
html {
font-size: 55%;
}
.header {
padding: 1.5rem 2rem;
}
}

@media(max-width:768px) {
#menu {
display: inline-block;
}
.header .navbar {
position: absolute;
top: 100px;
right: 0;
background-color: black;
width: 30rem;
height: calc(100vh - 9.5rem);
}
.header .navbar a {
color: white;
display: block;
margin: 1.5rem;
padding: .5rem;
font-size: 2rem;
}
}

问题排查与修复 #

1. #menu初始display: none不生效 #

原因：选择器优先级不足，被.header .icons a或Font Awesome内置样式覆盖。ID选择器虽优先级高于类，但第三方样式可能通过更具体的选择器生效。

修复：提升选择器优先级，使用更具体的组合选择器：

.header .icons #menu {
  display: none;
}

2. Media Query完全不生效 #

原因：CSS语法错误，@media关键字与括号之间缺少空格，浏览器无法正确解析媒体查询规则。

修复：给所有media query的括号前添加空格：

/* 错误写法 */
@media(max-width:991px) { ... }

/* 正确写法 */
@media (max-width:991px) { ... }

额外修复 #

原CSS中header .icons a:hover选择器错误（使用了标签选择器header而非类.header），导致hover效果无法触发，修复为：

.header .icons a:hover {
  color: black;
}

完整修复后的CSS代码 #

.header .icons a {
  cursor: pointer;
  font-size: 2.5rem;
  color: #333;
  margin-left: 1.5rem;
}

.header .icons a:hover {
  color: black;
}

.header .icons #menu {
  display: none;
}

@media (max-width:991px) {
  html {
    font-size: 55%;
  }
  .header {
    padding: 1.5rem 2rem;
  }
}

@media (max-width:768px) {
  .header .icons #menu {
    display: inline-block;
  }
  .header .navbar {
    position: absolute;
    top: 100px;
    right: 0;
    background-color: black;
    width: 30rem;
    height: calc(100vh - 9.5rem);
  }
  .header .navbar a {
    color: white;
    display: block;
    margin: 1.5rem;
    padding: .5rem;
    font-size: 2rem;
  }
}

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