CSS media query应用中的层叠特性使用最佳实践

media query是css3规范中引入的，它提供了一种responsive design的基础机制：浏览器在不同size的设备中将以不同样式展现网页，这就给一个网页能够适应不同device一种可能。在实际使用中，我常常碰到以下问题：为什么media query的rule不起作用？很有可能和你的media query所处的位置有关，也很有可能和media query中的selector权重不

如外面的targeting到相同元素的css权重有关，比如：

@media screen and (max-width: 960px) {
    p{
       background-color:red;
     }
}
p{
    background-color: blue;
}

在上面的query代码中，我们希望在小于960px时，p应用一个red背景，但是由于后面有同样权重的p选择器定义了blue的背景，根据css的层叠特性，后面的(normal p rule)将覆盖前面的(media queried p rule)规则，所以即使在screen为小于960px时，仍然无法应用media query中的css定义。

解决方案和最佳实践

将media query block放到通用规则的后面

再比如，如果media query中定义的css rule权重太低，则同样不会被适用：

<html>
<head>
    <title></title>
    <style type="text/css">
        p,.higher{
            background-color: blue;
        }

        @media screen and (max-width: 960px) {

            p{
                background-color:red;
            }
}
    </style>
</head>
<body>
<p class="higher">testing p tag for css rule嵌套vs normal css</p>
</body>
</html>

上面的例子中，在media query中只用了一个p元素选择器，但是由于在html中，该p又有一个class相关联，而css定义中，也有对该class的定义。这样即使media query的条件满足了，但是由于权重太低，依然无法应用其规则!

解决方案和最佳实践

media query必须目标明确，真正选中要选的元素，和外部普通css选择器需要是完全一样的。最好在普通的css选择器规则之后，立即放对该选择器设定样式的media query规则

这个原因就是所谓层叠特性，当css被优先级权重完全一样的选择器选中时，则后面的会覆盖前面的@！！

//注意：在html中的class摆列顺序由于其优先级完全一样，所以顺序没有关系，有关系的是其在css定义中出现的顺序，后面的将覆盖前面的rule，初学者容易搞混淆
<p class="specialred modifyblue">优先级层叠演示</p>
.modifyblue{
  color: blue;
}
.specialred{
  color: red;
}