Html 如何解决奇怪的@媒体冲突？

我正在运行两个媒体查询，以便根据屏幕大小更改div（.contact info）的填充和对齐方式：

@media only screen and (min-width: 1501px) and (max-width: 5000px) {
  .contact-info {
      padding-top: 198px !important;
      text-align: left !important;
  }
}

@media only screen and (min-width: 0px) and (max-width: 1500px) {
  .contact-info {
      padding-top: 0px !important;
      text-align: center !important;
  }
}

不幸的是，似乎第一个@media在与.contact-info div关联时甚至不会激活。只有第二个@media似乎与.contact-info div关联，所以整个过程都是脱节的

我附上了一张图片供参考。

您的代码运行良好！ 正如上面的答案所示，谨慎处理您的特殊性是一种有用的做法，但这并不是导致此问题的原因，因为您指定了媒体查询，并且它们是不同的。 您的代码运行良好。我在这里试过：

[https://codepen.io/kdgyimah/details/GRZRpMm][1] 

当你点击你指定的断点时，我改变了背景颜色，它可以正常工作

是否确实已禁用浏览器中的缓存？添加此代码之前，页面可能正在加载已保存的缓存/旧css版本。 根据您使用的浏览器，解决方案可能有所不同，但在Chrome中：

选择右上角的“菜单”按钮，然后选择 “更多工具”>“开发者工具”。您也可以通过 对于Windows和Linux，按Ctrl+Shift+I；对于Mac OS X，按Command+Option+I

此时会出现“开发工具”窗口

选择“网络”，选中“禁用缓存”框

如果您正在使用firefox，请使用此选项禁用缓存：

---

然后重新加载页面。这将加载最新或保存的CSS版本。

您可以在第一个@media中删除

和（最大宽度：5000px）

，以及

和（最小宽度：0px）

在第二个选项中。请按照回答中的建议尝试清除浏览器缓存。感谢您的反馈！不幸的是，无论我如何处理任何浏览器中的缓存（清除缓存、禁用缓存等），仍然存在与媒体查询相关的错误行为。我完全不知所措。感谢您的反馈！不幸的是，无论我如何处理任何浏览器中的缓存（清除缓存、禁用缓存等），仍然存在与媒体查询相关的错误行为。我完全不知所措。@cthebiz从您叙述的内容来看，我认为这与缓存无关，可能是您正在使用的WordPress主题，它覆盖了您动态添加的样式。请尝试在要设置样式的div上执行inspect元素，看看是什么负责设置其样式，并在选择元素后单击+图标（新样式规则），以获得该div元素的更具体选择器。然后使用该选择器添加媒体查询。