CSS 媒体查询 - 宽度规则不适用

Question

如果屏幕尺寸减小到 800 像素以下，我会尝试将标题的内容居中。

所以我定义了一个 css 媒体查询，但它不能正常工作。下面是我的代码的 fiddle :

http://jsfiddle.net/QGyXe/3/

注意:我知道有很多代码，但我正在尝试调整 div#head_frame 及其子项 div#logo_container 和 div#main_buttons_container

发生的事情是，当我减小屏幕尺寸时，我在 Chrome 的开发人员窗口中看到了新规则，但这些规则被划线了，我的意思是停用了。我不知道为什么。这是一个屏幕截图:

我试图用一个简单的 dom 重现错误，但它成功了:

http://jsfiddle.net/a3yKk/1/

但我把它放在这里是为了展示我正在努力实现的目标。

感谢您的帮助。

Answer 1

媒体查询中的 #main_buttons_container 选择器不如全局 CSS 中的 div#main_buttons_container 选择器准确，因此它被覆盖了。将您的 CSS 更改为:

@media screen and (max-width: 800px) {
  div#main_buttons_container {
    width: 100%;
  }
}