我可以將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選擇器結合使用嗎？

回答

相關問題