css - 为什么显示:flex taking precedence over display:none in Chrome?

Question

我有一个像这样的 flex 盒样式:

.myclass {
    display:flex;
}

和这样的媒体查询:

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

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

为什么会这样？

编辑:只有当媒体查询在 CSS 中排在第一位时才会发生这种情况。在我的应用程序中，这是不可避免的，因为它是一个相当复杂的 MeteorJS 应用程序，由多个 SCSS 文件组成。如果我在 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;
    }
}

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