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

Question

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

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

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%;
  }
}