css - 我可以将 CSS 媒体查询与 CSS 选择器结合使用吗？

Question

我正在设计用于显示文章的网页。主要内容是文章正文，但也有相关文章的链接列表。我希望列表正常显示在文章的一侧，但在以下任一情况下显示在文章下方:

• 视口(viewport)宽度 < 992px
• 文章内容广泛，例如一张大 table

我已经通过以下 CSS 实现了这一点......

.article-sidebar {
    text-align: left;
}
@media (min-width: 992px) {
    .article-sidebar {
        float: right;
        max-width: 28%;
    }
}
@media (max-width: 991px) { 
    .article-sidebar {
        padding-top: 46px;
        border-top: 1px solid #eeeeee;
        padding-left: 5%;
        padding-right: 5%;
    }
}

.article-sidebar-bottom {
    text-align: left;
    padding-top: 46px;
    border-top: 1px solid #eeeeee;
    padding-left: 5%;
    padding-right: 5%;
}

...再加上一些 JavaScript，如果文章有任何“宽子”，则删除“article-sidebar”类，如果有，则添加“article-sidebar-bottom”类。

但是，我不喜欢 >= 991px .article-sidebar 和 .article-sidebar-bottom 之间所有样式的重复。我知道如果同一类的不同媒体查询之间存在重复，我可以按照说明将它们合并 here , 如果不涉及媒体查询，我可以只用逗号分隔 CSS 选择器，但是有什么方法可以避免在这种情况下重复我自己吗？

Answer 1

我现在已经尝试了更多，并提出了一个不会以相同方式复制代码的解决方案:

.article-sidebar, .article-sidebar-bottom {
    text-align: left;
    padding-top: 46px;
    border-top: 1px solid #eeeeee;
    padding-left: 5%;
    padding-right: 5%;
}

@media (min-width: 992px) {
    .article-sidebar {
        float: right;
        max-width: 28%;
        border-top: initial;
        padding-left: initial;
        padding-right: initial;
    }
}

我认为我的问题是我在考虑“自上而下”，即从大屏幕开始，然后在媒体查询中添加对较小设备的支持。如果媒体查询处理的是更大屏幕，那么我认为它会变得更整洁。

感谢到目前为止发表评论的所有人。尽管我找到了解决我自己问题的更好方法，但我仍然对问题原始措辞的答案感兴趣......即是否有人可以提供语法以对类和媒体的不同组合使用相同的样式查询(如果此语法存在...)