javascript - CSS 样式因媒体查询而被划掉？

Question

因此，在我制作的这个 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;
  }
}

Answer 1

这只是一个特异性问题。一个类和一个元素/伪元素的特异性比一个类更高。

所以你只需要使 .solving 选择器更具体。例如

• ul.解决
• .navbar.solving
• !重要

如果您不知 Prop 体情况，可以查看 https://specificity.keegan.st/