因此,在我制作的这个 fiddle 中,我试图在单击 .menuToggle
时将最大高度更改为 20em,我通过切换类来完成此操作。该类被切换,但在 chrome 开发人员工具中,样式被划掉了。我假设这与媒体查询有关,但不完全确定。
任何帮助将不胜感激,谢谢 :)。 https://jsfiddle.net/kakbxak0/
@media screen and max-width 1024px{
.navBar ul li {
box-sizing:border-box;
width:100%;
text-align:center;
padding:15px;
}
.navBar>ul {
max-height:0;
}
.showing {
max-height:20em;
}
header {
text-align:center;
}
.menuToggle {
display:block;
}
}
最佳答案
这只是一个特异性问题。一个类和一个元素/伪元素的特异性比一个类更高。
所以你只需要使 .solving 选择器更具体。例如
- ul.解决
- .navbar.solving
- !重要
如果您不知 Prop 体情况,可以查看 https://specificity.keegan.st/
关于javascript - CSS 样式因媒体查询而被划掉?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42523910/