提示:本站收集StackOverFlow近2千万问答，支持中英文搜索，鼠标放在语句上弹窗显示对应的参考中文或英文， 本站还提供 中文繁体 英文版本 中英对照 版本，有任何建议请联系yoyou2525@163.com。
我正在尝试使用CSS/JS制作汉堡菜单。
我有一个导航栏（nav）菜单，在计算机中显示如下：
当分辨率小于 768 px （平板电脑和设备的分辨率低于此分辨率）时，在Burger Menu 中，如下所示：
当我们在计算机中时，汉堡菜单按钮是隐藏的（显示：无） ，但是当分辨率为（> 768px）时我让它出现并显示，并且使用Javascript我抓住这个按钮并向它添加事件监听器。
当我们点击汉堡按钮时，一个列表菜单（元素）必须从右到左与 translateX(0% ) 一起出现，因为我最初使列表 transform:translateX(-100%) 走出屏幕（我在 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%);
我要添加的类（只是为了返回 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");
})
但是由于某种原因，类（名为：nav_active）正确添加到（我使用Chrome 的开发工具和类切换，每次单击它时，我可以看到类添加和删除到），但是转换： translateX(0%)，它不起作用。
我不知道为什么？
我不确定，但你能试试这个吗？
.nav_active {
transform: translateX(0%) !important;
}
问题是 CSS 特异性； 该类ul.nav_links将采取更高的优先级不仅仅是一个.nav_active类。
级联顺序如下：（复制自下方w3schools链接）
<h1 style="color: #ffffff;"> 。 所以.nav_active被更高特异性的类覆盖，在这个例子中意味着元素 + 类。 如果它们具有相同级别的特异性（例如ul.nav_links和ul.nav_active ），那么稍后定义的就是优先考虑的那个。
你可能会发现，改变.nav_active类ul.nav_active甚至ul.nav_links.nav_active就足以使活动类正确适用。
有关如何更好地理解/计算特异性级别的一些详细信息，请参阅https://www.w3schools.com/css/css_specificity.asp 。
声明：本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.