为什么我的媒体查询规则没有优先级？

Question

我正在使用媒体查询来使我的网站重新定位。在我的CSS文档中，媒体查询低于所有其他样式。我正在使用diplay：none;它完美地工作但在另一个div上，即使我缩小浏览器大小，原始宽度也是优先考虑的。

开发者控制台的图片：

我是否真的必须为每个媒体规则添加!important？

CSS：

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

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

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


}

Answer 1

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

如果您将!important放在规则上，那么在尝试覆盖规则时，您可能需要使用!important，并且在您知道规则之前，您的一半规则将是{{1}并且修复响应性将成为一场噩梦。要么略微提高规则的特异性，要么改变他们的顺序。

非常重要的说明： !important查询不会对@media规则添加任何特异性。他们只是使它们适用（当条件成立时）或不适用（当不是真的时候）。

实用说明：一种非常好的技巧，可以始终保持选择器的特异性尽可能低 将自定义样式表置于最后CSS ，在任何主题/库/插件样式表之后。无论何时需要覆盖任何内容，只需将选择器从当前定义的位置复制粘贴，只有将其放在自定义样式表中才能使其具有优先级而没有更高的特异性。

Answer 2

如果您需要覆盖预设模板或开发平台提供的样式，则可能需要在媒体查询中添加！重要标记。例如，我使用Squarespace，并且必须不时地以这种方式覆盖它们的默认样式 - 但是，和我一样，我可以理解你对这样做的厌恶。

我知道我不应该＆＃34;要求澄清＆＃34;在这里，但我缺乏代表阻止我简单地发表评论：你是在开发类似于Squarespace，Weebly等的网络开发平台，并且实际应用！important标签实现了预期的结果吗？

最好，

泰勒