为什么在 Chrome 中 display:flex 优先于 display:none？答案

【问题标题】：Why is display:flex taking precedence over display:none in Chrome?为什么在 Chrome 中 display:flex 优先于 display:none？
【发布时间】：2016-12-08 00:25:06
【问题描述】：

我有一个这样的 flexbox 样式：

.myclass {
    display:flex;
}

还有这样的媒体查询：

@media (orientation:portrait) {
    .myclass {
        display:none;
    }
}

我希望该元素在纵向模式下是不可见的，但事实并非如此。在 Chrome 中，display:flex 优先，即使媒体查询更具体。

为什么会这样？

编辑：仅当媒体查询出现在 CSS 中时才会发生这种情况。在我的应用程序中，这是无法避免的，因为它是一个相当复杂的 MeteorJS 应用程序，由多个 SCSS 文件组成。如果我在 display:flex 之后重复相同的媒体查询，一切都会按预期工作。

【问题讨论】：

嗯...请链接。
媒体查询看起来有问题。那肯定是代码吗？
Can't reproduce
我没有链接，因为目前这是一个本地项目。媒体查询是正确的，我只是简化了（在实际查询中，它还包括一个 max-height 语句）。我可以看到 Chrome 正确地解释了它。但我发现这取决于哪个语句先出现。在我的应用程序中，首先包含媒体查询（因为它位于不同的 SCSS 文件中），然后是 flex 声明。如果我颠倒顺序，一切都会按预期进行。
查询的顺序会影响结果。但我不明白为什么。我希望媒体查询能够推翻正常的类声明，因为它更具体。

标签： css google-chrome media-queries flexbox

【解决方案1】：

根据您的编辑，您的 CSS 实际上看起来像这样

@media (orientation:portrait) {
    .myclass {
        display:none;
    }
}
.myclass {
    display:flex;
}

这会导致媒体查询中的显示属性被覆盖。

一种方法是使用!important

@media (orientation:portrait) {
    .myclass {
        display:none !important;
    }
}

但这可能会导致其他地方出现不良行为。另一种方法是为您的 flex 定义提供一个相反的媒体查询，如下所示：

.myclass {
    display:none;
}

@media (orientation:landscape) {
    .myclass {
        display:flex;
    }
}

这样，元素将始终隐藏，只有在媒体查询匹配时才可见。

【讨论】：