“@media all和（max-width：945px）”不改变945px及以下的字体大小

Question

我已经查看了有关该主题的几篇帖子（example，example），我的推理应该是可靠的：

@media all and (max-width: 945px) {
    div#browser-nav-nav-bar a, div#browser-nav-nav-bar p {
        font-size: 0.8rem;
    }
}

div#browser-nav-nav-bar a, div#browser-nav-nav-bar p {
    color: rgb(255,255,255);
    font-size: 1.2rem;
    margin: 0 0.5rem;
    padding: 0.5rem 1rem;
    line-height: normal;
}

但是，字体大小没有变化。我无法弄清楚我做错了什么。这是一个JSFiddle：

http://jsfiddle.net/2hLow0c5/

Answer 1

您的选择器是相同的（因此具有相同的特异性），因此the last font size defined will be the one that is applied。

将@media块移动到样式表的末尾。