CSS3媒体查询问题

我以为我只为

500px

和

1024px

之间的屏幕设置了一条规则，即使在

1024px

以上的屏幕尺寸上，该规则也被应用

这是CSS。

.red

样式正确应用于小于

480px

的屏幕。只是黄色应用于所有屏幕，即使是在

1024px

的

max width

上

。购买{
边框：1px实心#阿巴巴；
颜色：#333333；
显示：块；
字体系列：calibri，helvetica，无衬线；
字体大小：12px；
字体大小：粗体；
高度：25px；
线高：25px；
保证金：自动；
文本对齐：居中；
文字装饰：无；
宽度：70px；
}
@仅介质屏幕和（最大宽度：480px）{
.买{
颜色：红色；
}
}
@媒体屏幕和（最大宽度：1024px）和（最小宽度：500px）{
.买{
颜色：黄色；
}
}

您只忘记了

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