为什么只有一个媒体查询不起作用?

Question

我有一些媒体查询，但我被要求为更大的屏幕做一个。 我修改了这个媒体查询：

@media only screen and (min-width: 900px){
.right div{
padding-left: 3rem;       
}
.right div:nth-child(1){
padding-right: 3rem;
}
.right div:nth-child(1), .right div:nth-child(2){
padding-top: 3rem;
}
.right div:last-child{
padding-bottom: 2rem;
}
}

但后来我添加了新的媒体查询并修改了较小的查询，添加了最大宽度，并且新媒体查询没有加载(最小宽度：1600px(：

@media only screen and (min-width: 900px)  and (max-width: 1599px){
/*code*/
}
@media only screen and(min-width: 1600px){
.right div:nth-child(4){
padding-right: 6rem;
}
.right div{
padding-left: 3rem;
}
.right div:nth-child(1){
padding-right: 3rem;
}
.right div:nth-child(1), .right div:nth-child(2){
padding-top: 3rem;
}
.right div:last-child{
padding-bottom: 2rem;
}
}

这就是我之前所有媒体查询的方式：

@media only screen and (max-width: 600px) {    
/*some code*/      
}
@media only screen and (min-width: 768px) and (max-width: 899px) {   
/*some code*/
}
@media only screen and (min-width: 900px){
/* some code */
}

Answer 1

这是一个小错误。您的and和(min...)之间没有空间

改变：

@media only screen and(min-width: 1600px){

自：

@media only screen and (min-width: 1600px){

建议：使用CSS验证器来捕获此类错误。