为什么我的媒体查询规则没有被优先考虑？答案

【问题标题】：Why is my media query rule not being prioritized?为什么我的媒体查询规则没有被优先考虑？
【发布时间】：2017-04-21 04:34:13
【问题描述】：

我正在使用媒体查询来使我的网站具有响应性。在我的 CSS 文档中，媒体查询低于所有其他样式。我正在使用显示：无；效果很好，但在另一个 div 上，即使我减小了浏览器大小，原始宽度也会优先考虑。

开发控制台图片：

我真的必须在每条媒体规则中添加!important 吗？

CSS：

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

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

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


}

【问题讨论】：

您是否使用浏览器控制台检查实际应用了哪种样式？
你能重新排列样式表的加载顺序吗？澄清一下，媒体查询不会增加特异性。这意味着为了使媒体查询生效，它通常必须包含在它覆盖的规则之后。看起来这两个规则位于不同的样式表中。您需要重新排列它们以更改级联顺序。
或者增加你对选择器的特异性......
如果 index.css 在你有 !important 之前加载是否有可能？
加上 Joseph 和 Dani 所说的内容，如果您的选择器资格过高，您的媒体查询将不会优先于它。

【解决方案1】：

index.css 中 #112 行的规则也适用于 #sliderContainer 而不是 nav li，正如您在问题中所述（可以在您发布的图片中看到）。因为它是后来遇到的并且具有相同的特异性，所以它适用。

如果您将!important 放在规则上，您可能需要在尝试覆盖它时使用!important，在不知不觉中，您的一半规则将是!important，并且修复响应性将是一个噩梦。要么稍微增加规则的具体性，要么改变它们的顺序。

非常重要的说明： @media 查询不会向 CSS 规则添加任何特殊性。他们只是让它们适用（当条件为真时）或不适用（当条件不为真时）。

有用的提示：始终保持选择器的特异性尽可能低的一种非常好的技术是将您的自定义样式表放在<head>中的最后一个@，在任何主题/库/插件样式表之后。每当您需要覆盖任何内容时，您只需从当前定义的位置复制粘贴选择器，并且仅将其放置在您的自定义样式表中将使其具有优先级而没有更高的特异性。

【讨论】：

它是不是因为它在工作表中更靠后才遇到？因为样式.css 在标题中高于 index.css 你会推荐什么是排列它们等的最佳实践？
这是因为styles.css首先被读取（如你所说，在标题中较高）和index.css稍后被读取（在标题中较低）。更改它们在标题中的顺序，styles.css 中的规则将适用。我将在答案中添加另一个注释（如何不增加代码的特异性。很好的澄清问题！

【解决方案2】：

如果您需要覆盖预设模板或开发平台提供的样式，则可能需要向您的媒体查询添加 !important 标签。例如，我使用 Squarespace，并且必须不时以这种方式覆盖它们的默认样式 - 但是，和我自己一样，我可以理解您对这样做的反感。

我知道我不应该在这里“要求澄清”，但我缺乏代表使我无法简单地发表评论：您是否在使用类似于 Squarespace、Weebly 等的网络开发平台，并且确实应用 !important 标签实际上达到了预期的效果吗？

最好的，

泰勒

【讨论】：