css - 一个媒体查询不会覆盖原始 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;
}
 }