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

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 validator来捕获此类错误。