一个媒体查询不会覆盖原始 CSS答案

【问题标题】：One Media Query wont override original CSS一个媒体查询不会覆盖原始 CSS
【发布时间】：2017-07-21 15:51:49
【问题描述】：

所以我有一个媒体查询，除了一个元素在我检查元素时甚至不显示，我已经研究了特异性但无济于事......

div.results_box_custom{
width:25%;
height:370px;
border: 1px solid black;
float:left;
padding:0px;
text-align:center;
background:#D9D9E8;
}


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

 div.results_box_custom{
 height:200px !important;
 width:50vw !important;
 min-width:50vw !important;
}
 }

我尝试将媒体查询元素设置为：

body div.results_box_custom

但它并没有改变任何东西......

不知道为什么它不会改变我的 CSS，因为所有其他媒体查询的元素都会改变？提前感谢您的帮助！

【问题讨论】：

您的媒体查询是working as expected。另外，没有理由使用!important

标签： css media-queries css-specificity

【解决方案1】：

你可以试试这个代码

HTML

<div class="main">
<div class="results_box_custom">test</div>
</div>

CSS

.main >.results_box_custom{
width:25%;
height:370px;
border: 1px solid black;
float:left;
padding:0px;
text-align:center;
background:#D9D9E8;
}


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

.main>.results_box_custom{
 height:200px !important;
 width:50vw !important;
 min-width:50vw !important;
}
 }

【讨论】：

【解决方案2】：

只是为了确定：

您是否在您修改的样式之后放置了媒体查询？如果您有两个文件（或两个内联 <style> 标记），请确保带有媒体查询的文件稍后出现。
真的是div，你要修改吗？

稍后在源文件中声明的具有相同特性的样式将在发生冲突时获胜。媒体查询不会提高特异性。这就是您在他们正在修改的声明之后声明它们的原因。

您能否为您的问题提供 html 片段？

【讨论】：

【解决方案3】：

终于想通了。与 WordPress 缓存插件发生冲突。不知道为什么，但删除它解决了我的问题！

感谢您的帮助

【讨论】：

【解决方案4】：

在这段代码 sn-p 中似乎工作正常。激活媒体查询时，div 背景变为白色。我会检查你的 HTML 中的 div 类是否正确。

div.results_box_custom{
width:25%;
height:370px;
border: 1px solid black;
float:left;
padding:0px;
text-align:center;
background:#D9D9E8;
}


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

 div.results_box_custom{
 height:200px !important;
 width:50vw !important;
 min-width:50vw !important;
 background:#ffffff;
}
 }

&lt;div class="results_box_custom"&gt;test&lt;/div&gt;

【讨论】：