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背景将变为白色。我会检查你的HTML中的div类是否正确。

＆＃13;

e.Parameter

＆＃13;

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

＆＃13;

One Media Query不会覆盖原始CSS

4 个答案: