無法覆蓋的CSS媒體查詢

不知怎的，我無法改變我的導航鏈接的顏色在我的媒體查詢一個較小的屏幕尺寸。它應該變成白色，但對於更大的屏幕，它只是保持灰色。

@media all and (max-width: 580px){ 
nav li a, nav ul li{ 
color: white; 
text-align: right; 
display: block;

}

nav li a { 
text-decoration: none; 
color: #666666; 
font-size: 20px;

}

2017-07-27 heartcube

您應該使用移動優先方法。初始樣式應該是您希望它在移動設備上顯示的樣式，然後使用媒體查詢將樣式更改爲580像素。您現在使用的媒體查詢將被覆蓋，因爲CSS中的媒體查詢比桌面樣式更高。另外，您正在使用'//'來註釋一條代表Javascript評論的代碼。 CSS是'/ * * /'' – APAD1

媒體查詢不會增加選擇器的特異性。他們只是控制內部代碼是否被忽略。

這意味着...

@media (condition) { 
    a selector { 
    some value 
    } 
} 
a selector { 
    another value 
}

...總是應用「其他值」，因爲它以後設置且具有相同的特異性。您需要反轉他們，如預期他們將工作：

a selector { 
    another value 
} 
@media (condition) { 
    a selector { 
    some value 
    } 
}

2017-07-27 22:24:04

謝謝隊友，我不知道你要注意你如何訂購你的CSS，以爲你只需要在JS中，謝謝你，現在正在工作 – heartcube

CSS中的順序非常重要。你想保持特異性儘可能低，並安排條件，以便應用的條件總是最後讀取。這是理想。 –

媒體查詢應該是在CSS的最低部分。如果我第一次定義媒體查詢;並在下面定義常規CSS，較低的匹配覆蓋之前定義的一次。

將媒體查詢放到CSS的底部是很常見的。

2017-07-27 22:22:17

您的媒體查詢規則應該是後/低於常規規則。在您當前的代碼中，nav li a的媒體查詢規則位於第104行，一般規則位於第162行，即之後媒體查詢規則 - 因此它覆蓋了先前的規則。

只需將媒體查詢移動到底部（或者如果您逐個將它們一一列出，則按照通用規則進行操作），這將解決您的問題。

2017-07-27 22:37:57 Johannes

回答