爲什麼我的媒體查詢規則未被優先化？

我正在使用媒體查詢來使我的網站resposnive。在我的CSS文檔中，媒體查詢低於所有其他樣式。我正在使用diplay：無;它可以很好地工作，但在另一個div中，即使我減小瀏覽器大小，原始寬度也會優先考慮。爲什麼我的媒體查詢規則未被優先化？

開發者控制檯中的圖片：

Image of dev console

難道我真的要加!important每一個媒體的規則？

CSS：

@media screen and (max-width: 930px) { 

    /* INDEX */ 
nav ul { 
    display: none; 
} 

#sliderContainer { 
    width: 80%; 
    height: auto; 
} 


}

來源

2017-04-20 Xander

您是否使用過瀏覽器控制檯來檢查實際應用了哪種風格？ –

您是否可以重新排列樣式表加載的順序？爲了澄清，媒體查詢不增加特異性。這意味着爲了使媒體查詢生效，通常必須在其覆蓋的規則之後包含它。看起來這兩條規則在單獨的樣式表中。您需要重新排列它們以更改級聯順序。 –

或者增加您對選擇器的特異性.... – DaniP

在行#112在index.css的規則也適用由#sliderContainer而不是nav li，當你在你的問題的狀態（可您發佈的圖像中看到的）。因爲稍後會遇到並具有相同的特異性，所以適用於。

如果你把!important上的規則，你可能需要嘗試重寫它時使用!important，你知道它之前，有一半的規則將是!important和固定的響應將是一場噩夢。要麼稍微提高規則的特異性，要麼改變它們的順序。

非常重要的注意事項：@media查詢不會添加任何特定於CSS規則。他們只是讓他們適用（條件爲真）或不（如果不是真的）。

有用的注意事項：一個很好的技術，始終保持你的選擇儘可能低的特異性是去年內部<head>地方您的自定義樣式表，之後的任何主題/庫/插件樣式表。無論何時您需要重寫任何內容，只需從當前定義的位置複製粘貼選擇器，並且只將其放置在自定義樣式表中即可使其具有優先級，而無需更高的特定性。

來源

2017-04-20 20:19:54

稍後會遇到它，因爲它在工作表中進一步向下？ becuase styles.css比index.css中的頭部更高你會推薦什麼是安排他們的最佳實踐等等？ – Xander

後面會提到它，因爲'styles.css'首先被讀取（如你所說，在頭部更高），'index.css'稍後被讀取（頭部更低）。在標題中更改它們的順序，'styles.css'中的規則將應用。我會在答案中加入另一個註釋（如何不增加代碼的特異性，很好的澄清問題！ –

謝謝@Andrei – Xander

添加重要標記您的媒體查詢可能是必要的，如果您需要覆蓋由預先設定的模板或開發平臺提供的樣式。例如，我與Squarespace合作，不得不以這種方式不時重寫他們的默認樣式 - 但是，和我一樣，我可以理解你對此的厭惡。

我知道我不應該在這裏「請求澄清」，但是我的缺乏代表阻止我僅僅發表評論：您是否在類似於Squarespace，Weebly等的Web開發平臺上工作，以及確實應用！重要標籤實際上達到了預期的效果？

最佳，

泰勒

來源

2017-04-20 20:17:37 TCharb

爲什麼我的媒體查詢規則未被優先化？

回答

相關問題