css - 只有一个 css 媒体查询会影响元素的样式（仅适用于 Chrome，而不是 Firefox）

Question

我无法弄清楚为什么这两个媒体查询中只有一个有效。

这是我的代码

/* Desktop screen code ... */

/* media queries start */

@media (min-width: 751px) and (max-width: 1024px) {
    .element {
        background-color: red;
    }
}

@media (max-width: 750px) {
    .element {
        background-color: blue;
    }
}

只有第一个查询（即宽度在 751px 和 1024px 之间）有效，即使我交换查询的顺序或注释掉第一个查询，我也会得到相同的结果（在后一种情况下，第二个查询确实会影响元素） .

这有点令人沮丧，我很确定这一定是因为我没有看到一个非常明显的错误，所以我已经准备好（并且很高兴）在这里得到启发。

编辑 2：经过额外测试后，我意识到问题仅出现在 chrome (v70.0.3538.77) 上，而不是在 Ubuntu 16.04 上运行的 firefox (v 63.0) 上。

标签： cssmedia-queries

Answer 1

你忘了关闭你的第一条规则

@media (min-width: 751px) and (max-width: 1024px) {
    .element {
        background-color: red;
    }
}  <----- This was missing

@media (max-width: 750px) {
    .element {
        background-color: blue;
    }
}

@media (min-width: 751px) and (max-width: 1024px) {
  .element {
    background-color: red;
  }
}

@media (max-width: 750px) {
  .element {
    background-color: blue;
  }
}

<div class="element">
  Test
</div>