為什麼常規 CSS 規則會覆蓋 CSS 中的媒體查詢？

媒體查詢和 CSS 優先級

在 CSS 中，媒體查詢的優先順序低於常規 CSS 規則。這是由 CSS Cascade 決定的，CSS Cascade 是一組規定樣式應用順序的規則。

為何媒體查詢的優先順序較低

媒體查詢並沒有增加選擇器的特異性。這意味著，如果常規 CSS 規則和媒體查詢以相同的特異性定位相同元素，則常規 CSS 規則將優先。

範例：

考慮以下程式碼：

.logo img {
  width: 100%;
}

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

在此範例中，媒體查詢的優先順序低於非媒體查詢規則。因此，當視窗大小與媒體查詢相符時，非媒體查詢規則仍然適用，導致影像寬度設定為 100%。

解決方法

要將媒體查詢優先於常規 CSS 規則，有兩個選項：

1。交換規則順序

重新排序 CSS規則，使媒體查詢位於非媒體查詢規則之後：

.logo img {
  width: 100%;
}

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

2.增加選擇器特異性

透過增加額外的選擇器來增加媒體查詢規則的特異性：

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

避免！重要

做不要使用「!important」聲明來覆蓋媒體查詢的優先順序。這將導致過度使用「!important」並使管理 CSS 特異性變得困難。

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