我可以将 CSS 媒体查询与 CSS 选择器结合起来吗？

Question

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

• 视口
• 文章内容广泛，例如一张大桌子

我通过以下 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;
    }
}

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

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