html - 媒体查询 CSS 不工作

Question

我正在尝试进行媒体查询以在我应用类时隐藏一些文本，因为它具有响应性，我通常使用基础，但我需要自定义媒体查询。

好像没有申请。

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .hideMediaQuery{display:none !important;}
}

这是我正在尝试将其应用到的类(class):

 <div class="large-12 columns ProductDropdown left">
     <p class="hideMediaQuery">RACES</p>
     <label>
         <p>TESTEST</p>
     </label>       
 </div>

有人知道为什么它不起作用吗？我只是把它放在页面顶部的样式标签中进行测试，然后再将它放入样式表中，这是原因吗？

任何建议都会有所帮助。

Answer 1

如果你有这样写的css类:

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .hide-for-text{display:none !important;}
}

.hide-for-text{display:block !important;}

...媒体查询中的代码将被覆盖，因此不会工作。

DEMO 1

媒体查询通常应放在 CSS 文件的底部以解决此问题。

(WORKING) DEMO 2