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

媒体查询在这里无关紧要。它们根本不会影响the cascade。

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

Answer 2

使用!important回答问题我可以覆盖inline-css吗？ ... 是。

您真正的问题：

当屏幕再次变大时，通过向媒体查询添加！important。请参阅以下代码段（全屏运行并使屏幕更小/更大）

＆＃13;

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

＆＃13;

		@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;
			}
		}

＆＃13;

<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>

＆＃13;

Answer 3

通常，最具体的CSS选择器将应用于元素。 cascading order定义如下（由我突出显示）：

查找适用于目标媒体类型的相关元素和属性的所有声明。声明适用于   关联的选择器匹配有问题的元素和目标   medium匹配包含所有@media规则的媒体列表   声明和样式表所在路径上的所有链接   达成了。

根据重要性（正常或重要）和来源（作者，用户或用户代理）进行排序。按升序排列：

用户代理声明

用户正常声明

作者正常声明

作者重要声明

用户重要声明



根据选择器的特异性对具有相同重要性和来源的规则进行排序：更具体的选择器将覆盖更一般的选择。   伪元素和伪类被视为普通元素和   分别是。

最后，按指定顺序排序：如果两个声明具有相同的权重，原点和特异性，后者指定胜利。   导入样式表中的声明被认为是在任何声明之前   样式表本身的声明。

此外，您可以使用!important keyword强制应用样式。但是，除非在所有其他途径都已用尽之后绝对必要，否则不应使用该声明。如果您想了解有关!important关键字的更多信息，何时使用该关键字以及为何避免使用该关键字，我建议您阅读this article。

Answer 4

您可以在媒体查询中添加一个类，然后在函数中调用addClass。

顺便说一句您设置display：block;导航时最大宽度：1000px 如果要在屏幕加宽时显示导航，则应为MIN宽度。

Answer 5

这将100％工作;

@media screen and（min-width：1001px）{

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

nav {
  display: static !important;
 }

}

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

5 个答案: