[CSS] 媒体查询的优先级和范围

.test{
    display:inline-block;
    width:100px;
    height:100px;
    background:black;
}

@media screen and (max-width: 700px){
    .test{
        background:red;
    }
}
@media screen and (max-width: 500px){
    .test{
        background:green;
    }
}

现象：
窗口宽度为700px的时候，.test元素变红。
窗口宽度为500px的时候，.test元素变绿。

总结：
（1）媒体查询的宽度在等于给定宽度时，相应的样式会被应用
max-width:700px，指的是width<=700px则使用样式。

（2）媒体查询可以被覆盖，后面的@media会覆盖前面的。
但是不支持!important，@media screen and (max-width: 700px !important)是语法错误。
导致该媒体查询语句无效。