搞懂了CSS与@medid顺序的优先级

前段时间做的APP下载链接，调试手机端的样式遇到一些问题。这几天有空时，也会试下，也搞懂了一些问题，其中，最主要是CSS与@medid有优先级的，必须将@medid放在后面才行。

先看一下错误的例子：

@media screen and (max-width: 768px) {
.post h2 {
width:95%;
}
}

.post h2 {
width:100%;
}

.post h2的宽度永远都是100%，原因是@media是对条件才查询，但是它也遵守css的优先级顺序，后面的样式会覆盖之前的。

正确的例子：

.post h2 {
width:100%;
}

@media screen and (max-width: 768px) {
.post h2 {
width:95%;
}
}

正确的写法是需要将@media放在后面，这样的话，如果条件符合，就会覆盖之前样式。

我是由于没经验，将自己添加的样式都放在后面，而原来样式又有@media screen and (max-width: 768px)的定义，而且是放在前面，我就将手机样式放进去，结果是有些样式能生效，而有些样式一直不生效，原来是@media顺序搞错了。

之后将自己添加的样式放在@media screen and (max-width: 768px)前面，果然发现样式生效。

这就是经验，多尝试下，手机端样式也是可以自己调整。虽然不能达到制作的水平，但是简单修改下样式还是可以做到的。