如何覆盖媒体查询中应用的 CSS 规则？

Question

我使用 jQuery 为我的页面设置动画 - 一个名为slideToggle()的函数。我可以在调试器中查看它并查看应用于我的<nav>元素的样式。

我面临的问题是，在我调用 slideToggle （第二次）之后，它会将 display:none 设置<nav>为正确的。

但是，如果我再次展开屏幕，菜单不会像它应该的那样重新出现在正常状态。

我在媒体查询中设置了它，但它被忽略了。

@media screen and (max-width: 1000px){

/* This does nothing but I want it to turn the display on.
*/

nav {
  display: block;
 }

}

Answer 1

要回答这个问题，我可以覆盖 inline-css 吗？...是的，通过使用!important。

你真正的问题：

通过在屏幕再次变大时将 !important 添加到您的媒体查询中。请参阅以下代码段（全屏运行并使屏幕变小/变大）

(function(){
  $('button').on('click', function(e){
    $('#test').slideToggle();
  });
})();

		@media screen and (min-width: 1000px) {
			ul {
				height:50px;
				background-color: red;
				width: 100%;
			}
			li {

				display: inline-block;
				height: 50px;
				line-height: 50px;
				float:left;
				margin-left: 50px;
			}
			#test {
				display: block !important;
			}
			button {

				display: none !important;
			}
		}

		@media screen and (max-width: 1000px) {
			ul {
				background-color: red;
				width: 100%;
			}
			li {
				display: block;
				height: 50px;
				line-height: 50px;
			}
			#test {
				display: none;
			}
			button {
				display: block;
			}
		}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test">
	<ul>
		<li>This</li>
		<li>Is</li>
		<li>a</li>
		<li>menu</li>
	</ul>
</div>
<button >Toggle menu</button>

Answer 2

媒体查询在这里无关紧要。它们根本不影响级联。

内联规则总是胜过规则集规则，除非规则集规则是!important而内联规则不是。