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

Question

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

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，因为所有其他媒体查询元素都会更改？ 提前感谢您的任何帮助！

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

Answer 2

可以肯定的是：

• 您是否在修改样式后放置了媒体查询？如果您有两个文件(或两个内联<style>标签(，请确保稍后发布带有媒体查询的文件。
• 真的div，你在尝试修改吗？

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

---

你能为你的问题提供 html 片段吗？

Answer 3

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

感谢您的帮助

Answer 4

它似乎在此代码片段中工作正常。激活媒体查询时，div 背景将变为白色。我会检查div 类在您的 HTML 中是否正确。

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

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