为什么我的媒体查询规则未被优先化？

我正在使用媒体查询来使我的网站resposnive。在我的CSS文档中，媒体查询低于所有其他样式。我正在使用diplay：无;它可以很好地工作，但在另一个div中，即使我减小浏览器大小，原始宽度也会优先考虑。为什么我的媒体查询规则未被优先化？

开发者控制台中的图片：

Image of dev console

难道我真的要加!important每一个媒体的规则？

CSS：

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

    /* INDEX */ 
nav ul { 
    display: none; 
} 

#sliderContainer { 
    width: 80%; 
    height: auto; 
} 


}

来源

2017-04-20 Xander

您是否使用过浏览器控制台来检查实际应用了哪种风格？ –

您是否可以重新排列样式表加载的顺序？为了澄清，媒体查询不增加特异性。这意味着为了使媒体查询生效，通常必须在其覆盖的规则之后包含它。看起来这两条规则在单独的样式表中。您需要重新排列它们以更改级联顺序。 –

或者增加您对选择器的特异性.... – DaniP

在行#112在index.css的规则也适用由#sliderContainer而不是nav li，当你在你的问题的状态（可您发布的图像中看到的）。因为稍后会遇到并具有相同的特异性，所以适用于。

如果你把!important上的规则，你可能需要尝试重写它时使用!important，你知道它之前，有一半的规则将是!important和固定的响应将是一场噩梦。要么稍微提高规则的特异性，要么改变它们的顺序。

非常重要的注意事项：@media查询不会添加任何特定于CSS规则。他们只是让他们适用（条件为真）或不（如果不是真的）。

有用的注意事项：一个很好的技术，始终保持你的选择尽可能低的特异性是去年内部<head>地方您的自定义样式表，之后的任何主题/库/插件样式表。无论何时您需要重写任何内容，只需从当前定义的位置复制粘贴选择器，并且只将其放置在自定义样式表中即可使其具有优先级，而无需更高的特定性。

来源

2017-04-20 20:19:54

稍后会遇到它，因为它在工作表中进一步向下？ becuase styles.css比index.css中的头部更高你会推荐什么是安排他们的最佳实践等等？ – Xander

后面会提到它，因为'styles.css'首先被读取（如你所说，在头部更高），'index.css'稍后被读取（头部更低）。在标题中更改它们的顺序，'styles.css'中的规则将应用。我会在答案中加入另一个注释（如何不增加代码的特异性，很好的澄清问题！ –

谢谢@Andrei – Xander

添加重要标记您的媒体查询可能是必要的，如果您需要覆盖由预先设定的模板或开发平台提供的样式。例如，我与Squarespace合作，不得不以这种方式不时重写他们的默认样式 - 但是，和我一样，我可以理解你对此的厌恶。

我知道我不应该在这里“请求澄清”，但是我的缺乏代表阻止我仅仅发表评论：您是否在类似于Squarespace，Weebly等的Web开发平台上工作，以及确实应用！重要标签实际上达到了预期的效果？

最佳，

泰勒

来源

2017-04-20 20:17:37 TCharb

为什么我的媒体查询规则未被优先化？

回答

相关问题