为什么display：flex优先于display：Chrome中没有？

Question

我有这样的flexbox样式：

.myclass {
    display:flex;
}

和这样的媒体查询：

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

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

为什么会这样？

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

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

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