CSS 规则没有像预期的那样相互覆盖

Question

我的 CSS 中有两个(实际上是三个)@media 部分。根据我的经验，我希望一个会相互覆盖，因为它稍后出现在 CSS 文件中。然而，情况并非如此(在多个浏览器上)。我做错了什么？

HTML:

<div id="experts-partition-1"></div>

CSS:

@media (min-width: 410px) {

    #experts-partition-1 {
        clear: both;
    }
}

@media (min-width: 970px) {

    #experts-partition-1 {
        width: 0px;
        float: right;
    }
}

浏览器应用第一部分(最小宽度:410px)而非第二部分(最小宽度:970px)的 experts-partition-1 规则。可能是什么原因？

Answer 1

您的代码可以工作，但条件是，您必须超过 970px 才能工作 @media (min-width: 970px) 或者您可以尝试 max-width 而不是 min-width 并且序列应该是这样的

@media (max-width: 970px) {

    #experts-partition-1 {
        width: 0px;
        float: right;
    }
}

@media (max-width: 410px) {

    #experts-partition-1 {
        clear: both;
    }
}

使用这个序列背后的原因是 css 的性质。它从上到下工作。希望对你有帮助