css - 为什么这些媒体查询不会相互覆盖？

Question

我在我的样式表中设置了以下媒体查询，有人告诉我为什么底部查询没有覆盖第一个查询吗？

@media screen only and (max-width:992px) {
  .some-element {float:left;}
}

@media screen only and (max-width:768px) {
  .some-element {float:none;}
}

Answer 1

尝试@media screen 而不是@media screen only。底部查询会覆盖顶部查询。

@media screen and (max-width:992px) {
    .some-element {
        float:left;
        background-color: #f00;
    }
}
@media screen and (max-width:768px) {
    .some-element {
        /** See how the background-color property is overriden */
        background-color: #000;
        color: #fff;
    }
}

<div class="some-element">Hi. I am floating.</div>

<h1>I am a block element</h1>