link引入media，通用样式失效问题

通过media可以对不同分辨率的界面进行响应不同的样式，怎么使用很多文章都有讲解，下面说说引入后通用样式失效的问题：

<link rel="stylesheet" type="text/css" media="screen and (max-width:960px)" href="link.css">

这里设置了一个分辨率小于等于960px的一个样式表`

.color {
    width: 100px;
    height: 100px;
    background-color: red;
}

@media only screen and (max-width:960px) {
    .color {
        width: 100px;
        height: 100px;
        background-color: green;
    }
}

这是样式，改变一个div的背景


当我展示的时候，通用样式并没有展示，但是小于960px的样式确实有，查了半天，原来还需要引入一条大于960px的link

<link rel="stylesheet" type="text/css" media="screen and (min-width:960px)" href="link.css">

再看效果

有效果了

对于响应式的样式，还有一点，如果在html里面的style里面引入，是可以显示通用样式的，希望大佬讲讲原理