这个媒体查询有什么问题

Question

我非常感谢任何能够告诉我为什么这个媒体查询只能部分工作（字体大小改变而不是颜色）的人。

<div>
<span id='one'>This is one 
<span id='two'>and this is two</span>
 and now back in one</span>
</div>

@media all and (min-width:500px)
{
 #two{font-size:2em;color:#0000ff;text-decoration:underline;}
}

#two{color:red;}

这是一个显示问题的fiddle。只需拖动调整大小栏即可调整输出窗口的大小。字体大小按预期更改，但颜色保持不变。

Answer 1

因为#two{color:red;}会覆盖media query中的样式，因为您在media query之后 。将其置于之前 - JSFiddle

Answer 2

尝试使用此

#two{color:red;}

@media all and (min-width:500px){
    #two{
        font-size:2em;
        color:green;
        text-decoration:underline
    }
}