html - 移动优先媒体查询 : Is there a way to 'scope' styles (regarding visibility classes)?

Question

我正在使用移动优先方法使用 CSS3 媒体查询开发一个页面，这意味着我从小处着手，逐步提高。

但现在我遇到了一个问题:如何处理可见性类的“样式渗漏”？
让我解释一下我的意思——当我的第一个媒体查询看起来像这样时:

@media only screen and (min-width: 20em) {
    // Styles here
}

这些样式不适用于小于 20em 的屏幕。这实际上没有问题，因为没有包含在媒体查询中的样式基本上是第一个媒体查询(我希望你明白我的意思)。

但现在我想引入可见性类来隐藏某些屏幕尺寸的元素。问题是，这些样式基本上是被继承的。参见:

@media only screen and (min-width: 20em) {
    .hidden-first {
        display: none;
    }
}

任何具有 hidden-first 类的元素都会在屏幕宽度达到 20em 或更宽时立即隐藏。但我只想在媒体查询处于事件状态时隐藏该元素。

我该怎么做——有没有办法在另一个媒体查询中重置样式？

Answer 1

我建议您创建一个类似hide-for-medium的类并为其创建规则display:none !important;

看看 Foundation框架，看看怎么做。我想这是处理这种情况的最佳方式。