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

我正在设计一个显示文章的网页。主要内容是文章正文，但也有相关文章的链接列表。我想名单通常被显示在文章的一面，但在以下任一情况将显示在文章的下面：我可以将CSS媒体查询与CSS选择器结合使用吗？

视口< 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可以算出如果文章有什么“广泛儿童”，并删除“文章 - 侧边栏'类，并添加'文章 - 侧栏底部'类，如果是这样的话。

但是，我不喜欢> = 991px .article-sidebar和.article-sidebar-bottom之间的所有样式重复。我了解，如果同一班级的不同媒体查询之间有重复，我可以按照here的说明合并它们，如果不涉及媒体查询，我可以用逗号分隔CSS选择器，但有什么办法可以避免重复自己这个案例？

来源

2015-11-06 James K

您必须重新构建标记以增加可跨屏幕尺寸共享的数量。在'.article-sidebar'和'.article-sidebar-bottom'类之间重复样式是很奇怪的。如果你想要侧边栏上的样式，它应该只适用于一个类。 –

@DerekPeterson - 谢谢，我认为重组确实是一条可行的路。我已经完成了这个并发布了我自己的答案。 –

没问题！我很高兴你明白了。 –

现在我打得有关此多一点，拿出不重复同样的方式代码的解决方案：

.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; 
    } 
}

我想我的问题是，我在想'自顶向下“，即从大屏幕开始，然后在媒体查询中添加对较小设备的支持。如果这是由媒体查询处理的屏幕，则我认为它变得更加整洁。

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

来源

2015-11-06 20:35:49

相同。因为如果我找不到解决方案，那么我将不得不重复我的代码块五次。 – Pangamma

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

回答

相关问题