仅应用了一个媒体查询答案

【问题标题】：Only One Media Query Being Applied仅应用了一个媒体查询
【发布时间】：2019-06-04 18:45:19
【问题描述】：

所以我有一个子主题，我正试图做出响应，但其中一个媒体查询根本不适用——一旦屏幕变小，它就会将 .single-column 的背景更改为橙色超过 700 像素。其他两个媒体查询完美运行。有没有人知道为什么这个媒体查询不起作用以及我该如何解决？

这是一个子主题，父主题具有针对以下屏幕尺寸的媒体查询：2500px、1300px、1100px、1000px。这些都没有被我的代码覆盖，但我很好奇这是否与我的问题有关，因为我遇到问题的屏幕尺寸不在父主题的媒体查询集中。

 /* 1100px */
 @media screen and (max-width: 1100px) {
    .mostrecent > ul {
      background-color: blue;
    }
 }

 /* 1000px */
 @media only screen and (max-width: 1000px) {
    .single_column {
      display: flex;
      flex-direction: column;
 }

 .right_column70 {
    order: 1;
    width: 100%;
 }

 .left_column30 {
    order: 2;
    display: flex;
    width: 100%;
 }

 .mostrecent > ul {
    display: flex;
 }
}

/* 700px 
This one doesn't work */
@media only screen and (max-width: 700px) {
    .single_column {
     background-color: red;
 }
}

【问题讨论】：

绝对没有理由不工作。看看：jsfiddle.net/websiter/4wca1s9k。最有可能的是，您有另一个规则覆盖 CSS 中的 background-color 属性，无论设备宽度如何，其选择器都比 1 类更强。使用检查器查看当前值的来源。
嗯，真奇怪，我刚刚检查了检查器，而另一个唯一定义 background-color 的地方是 body。当我在没有媒体查询的情况下定义它时，它适用。
在这种情况下，请仔细检查声明 before 中的任何语法错误（语法错误使以下规则不再适用，具体取决于错误是什么）。此外，请检查您的标记是否存在任何验证错误。

标签： wordpress css css-selectors media-queries

【解决方案1】：

大多数情况下，.single_column 的主主题样式表中有一个 CSS 规则，它使用具有更高 CSS 规范 的选择器（您可以通过谷歌搜索了解更多信息）。在这种情况下，媒体查询规则不会覆盖它，因为它的特异性较低。

您应该使用浏览器工具检查 .single_column 元素，以查看应用了哪个 CSS 规则。

例如，如果该规则具有main .container-1 div.wrapper > products .single_column 之类的选择器，则您需要在该媒体查询中为您自己的 CSS 规则使用相同的选择器（或更具体/更复杂的选择器）。

【讨论】：