CSS3 媒体查询问题

Question

我认为我只为 500px 和 1024px 之间的屏幕设置的规则甚至在超过 1024px 的屏幕尺寸上也适用。

这是 CSS。 .red 样式在小于 480px 的屏幕上正确应用。只是黄色应用于所有屏幕，即使是那些超过 1024px 的 max-width。

.buy {
    border: 1px solid #ABABAB;
    color: #333333;
    display: block;
    font-family: calibri,helvetica,sans-serif;
    font-size: 12px;
    font-weight: bold;
    height: 25px;
    line-height: 25px;
    margin: auto;
    text-align: center;
    text-decoration: none;
    width: 70px;
}

@media only screen and (max-width: 480px) {
    .buy {
        color: red;
    }
}

@media screen and (max-width: 1024px) and (min-width: 500px) {
    .buy {
        color: yellow;
    }
}

Answer 1

你只忘记了

@media only screen and (min-width: 500px) and (max-width: 1024px) {
   .buy {
     color: yellow;
   }
}