Question

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

视口是＆lt; 992px宽
文章内容广泛，例如：一张大桌子

我用以下的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，如果文章中有任何＆＃34;宽的孩子＆＃34;并删除＆＃39;文章侧栏＆＃39;上课并添加＆＃39; article-sidebar-bottom＆＃39;如果是这样的话。

但是，我不喜欢＆gt; = 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;
    }
}

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

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

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

1 个答案: