為什麼非媒體查詢有時會覆蓋 CSS 中的媒體查詢？

媒體查詢與非媒體查詢：了解CSS 特異性

在CSS 中，媒體查詢用於根據設備螢幕應用樣式大小或其他視口特徵。然而，我們經常觀察到，與常規 CSS 聲明相比，媒體查詢的優先順序似乎較低。

優先順序較低的原因

此行為源自於 CSS 級聯的概念。當多個規則針對相同元素時，瀏覽器會根據規則的特殊性對規則進行優先排序。具有較高特異性的選擇器將覆蓋具有較低特異性的選擇器。

媒體查詢本身並不會增強選擇器的特異性。因此，如果非媒體查詢選擇器和媒體查詢選擇器具有相同的特定性，則當媒體查詢不相關時，非媒體查詢選擇器將優先。

範例：

考慮以下CSS 片段：

.logo img {
    width: 100%;
}

@media screen and (min-width: 100px) and (max-width: 1499px) {
  .logo img {
     width: 120%;
  }
}

在此範例中，非媒體查詢寬度為100%。但是，當螢幕寬度落在指定範圍內時，會啟動媒體查詢並將寬度設為 120%。

但是，如果螢幕寬度超出此範圍，則非媒體查詢規則將採用優先級，覆蓋媒體查詢的寬度設定。

增加的解決方案優先權

提升媒體查詢的優先順序：

1. 交換規則集的順序：

   • 將媒體查詢規則移至非媒體查詢規則下方以利用級聯

2. 增加選擇器特異性：

   • 透過增加額外的標籤或屬性來增強媒體查詢選擇器的特異性選擇器。例如，將其變更為 .logo 影像會增加其特異性。

3. 使用!important（警告）：

   • 此方法涉及在媒體查詢規則中添加“!important” 。然而，由於它可能會導致維護問題，因此不鼓勵這樣做。

以上是為什麼非媒體查詢有時會覆蓋 CSS 中的媒體查詢？的詳細內容。更多資訊請關注PHP中文網其他相關文章！