如何在指定像素下显示元素？汉堡菜单无法显示问题求助

我希望屏幕宽度≤670px时显示#hamburger元素，编写了CSS媒体查询但代码未生效，#hamburger始终无法显示，以下是相关代码，请求排查问题：

相关CSS代码 #

@media screen and (max-width: 670px) {
    #hamburger {
        display: block;
    }
}

#hamburger {
    display: none;
}

#hamburger {
    display: none;
}

.navbar .checkbox {
    position: absolute;
    display: block;
    height: 32px;
    width: 32px;
    top: 20px;
    right: 20px;
    z-index: 5;
    opacity: 0;
    cursor: pointer;
}

.navbar .hamburger-lines {
    display: flex;
    height: 26px;
    width: 32px;
    position: absolute;
    top: 17px;
    right: 20px;
    z-index: 2;
    flex-direction: column;
    justify-content: space-between;
    opacity: 1;
    transition: opacity 0.2s ease;
}

相关HTML代码 #

<nav class="navbar">
        <ul>
            <li><a href="#Home">HOME</a></li>
            <li><a href="#Skills">SKILLS</a></li>
            <li><a href="#Portfolio">PORTFOLIO</a></li>
            <li><a href="#AboutMe">ABOUT ME</a></li>
        </ul>

        <div id="hamburger">
            <input class="checkbox" type="checkbox" name="" id="" />

            <div class="hamburger-lines">
                <span class="line line1"></span>
                <span class="line line2"></span>
                <span class="line line3"></span>
            </div>  
        </div>

问题排查与解决方法 #

• 核心原因：CSS声明顺序导致优先级覆盖
  CSS遵循“后声明的样式优先级更高”规则，你的代码中：

  1. 媒体查询里的#hamburger {display:block;}写在了全局#hamburger {display:none;}之前，导致全局样式直接覆盖了媒体查询的规则。
  2. 还重复声明了两次#hamburger {display:none;}，进一步强化了覆盖效果。

• 解决步骤

  1. 调整CSS代码顺序，将媒体查询块移动到所有#hamburger全局样式的后面：

     #hamburger {
         display: none;
     }
     
     @media screen and (max-width: 670px) {
         #hamburger {
             display: block;
         }
     }
     

  2. 删除重复的#hamburger {display:none;}声明，避免冗余和优先级混淆。

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