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

Question

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

视口宽度 < 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 如果文章有任何 "wide children" 并删除 'article-sidebar' class 并添加 'article-sidebar-bottom' class 如果是的话。

但是，我不喜欢 >= 991px .article-sidebar 和 .article-sidebar-bottom 之间的所有样式重复。我知道如果相同 class 的不同媒体查询之间存在重复，我可以按照解释 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;
    }
}

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

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

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

Can I combine CSS media queries with CSS selectors?

css

media-queries