灯箱打开时 CSS 媒体查询被覆盖答案

【问题标题】：CSS Media queries gets overriden when lightbox is open灯箱打开时 CSS 媒体查询被覆盖
【发布时间】：2016-01-23 17:17:27
【问题描述】：

当屏幕小于 1000 像素时，我有一个覆盖元素的 CSS 媒体查询。媒体查询运行良好，直到我打开一个颜色框，那时媒体查询会被以前的样式覆盖。

我的代码是这样的：

master.css

#header .holder {
...
width: 960px;
...
}

mobile.css

@media all and (max-width: 1000px) and (min-width: 320px) {
  #header .holder {
  ...
  width: 100%;
  ...
  }
}

当我打开一个颜色框时，我会在 Chrome 的 CSS 检查器中看到：http://i.imgur.com/mhWvF.png （以前的样式是覆盖媒体查询的）

为什么代码会被覆盖？窗口中的颜色框触发了什么事件来实现这一点？

【问题讨论】：

您的 CSS 文件的顺序是什么？可能是因为即使是窄的浏览器也能满足主宽度，所以不需要应用移动版。尝试将 mobile.css 放在最后，让它成为最后渲染的东西？
'colorbox' 是什么意思？
从您的屏幕截图看来，以前的样式来自master.php，这将使其成为内部样式表。由于它与您的外部样式表具有相同的选择器特异性，是否会因为内部样式表具有更高的优先级而使用以前的样式？
各位，这和css文件顺序无关，我解释一下：master.php是一个提供CSS内容的css编译器，被解释为CSS。 master.php 首先加载 mobile.css 感谢您的帮助，Jack 对此有正确的答案。

【解决方案1】：

colorbox 的作者在这里。我以前没有听说过这个问题，但这可能是您在颜色框中显示的内容的结果。

像这样的奇怪问题通常是由于人们不正确地将 HTML 文档作为 ajax 打开，而不是在 iframe 中显示它们。由此产生的无效 HTML、脚本和样式的混合会导致各种问题。

我的猜测是，这是特定于您的实现的东西。我建议尝试在 jsfiddle.net 中创建问题的简化演示，并在此处或 colorbox 的问题跟踪器发布指向该问题的链接。

【讨论】：