提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我正在尝试使用CSS/JS制作汉堡菜单。
我有一个导航栏（nav）菜单，在计算机中显示如下：
在汉堡菜单中，当分辨率小于 768 像素（平板电脑和低于此分辨率的设备的分辨率）时，如下所示：
当我们在计算机中时，汉堡菜单按钮是隐藏的（显示：无） ，但我让它在分辨率为（> 768px）时出现，并显示出来，并且使用 Javascript 我抓住这个按钮并向它添加事件监听器。
当我们点击汉堡按钮时，一个列表菜单（元素）必须从右到左出现 translateX(0% )，因为我最初将列表转换为：translateX(-100%) 到 go 出屏幕（我在 body 中添加了一个 overflow-x:hidden 来隐藏多余的部分并提供一个水平滚动条，无论如何）..
ul.nav_links 最初的样式：
position: absolute;
right: 0;
top: 8vh;
height: 92vh;
background-color: rgb(68, 122, 122);
display: flex;
flex-direction: column;
width: 50%;
transition: transform 2s;
transform: translateX(100%);
我要添加的 class （只是返回 0%）：
// Class to add in JavaScript
.nav_active {
transform: translateX(0%);
}
Js代码：
//grabbing the burger button
let burger=document.querySelector(".burger");
//grabbing the ul element with class (nav_links)
let nav=document.querySelector(".nav_links");
//Add the listener to burger button, that have to toggle the class "nav_active"
burger.addEventListener("click",()=>{
nav.classList.toggle("nav_active");
})
但是由于某种原因，class（命名为：nav_active）正确添加到（我使用Chrome 的开发工具和 class 切换每次我点击它时，我可以看到 ZA2F2ED4F8EBC2CBB4C21A29DDC40AB6 ） translateX(0%)，它不起作用。
我不知道为什么？
我不确定，但你能试试这个吗？
.nav_active {
transform: translateX(0%) !important;
}
问题是 CSS 特异性； ul.nav_links 的ul.nav_links将比仅.nav_active class 具有更高的优先级。
级联顺序如下：（从下面的w3schools链接复制）
<h1 style="color: #ffffff;"> 。 所以.nav_active被更高特异性的 class 覆盖，在这个例子中意味着元素 + class。 如果它们具有相同级别的特异性（例如ul.nav_links和ul.nav_active ），那么稍后定义的那个就是优先的那个。
您可能会发现将.nav_active class 更改为ul.nav_active甚至ul.nav_links.nav_active就足以使活动 class 正确应用。
有关如何更好地理解/计算特异性水平的一些详细信息，请参阅https://www.w3schools.com/css/css_specificity.asp 。
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.