Question

不知何故，我无法在媒体查询中为较小的屏幕尺寸更改导航链接的颜色。它应该变成白色，但对于更大的屏幕，它只是保持灰色。

@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;

}

Answer 1

媒体查询不会为选择器添加特异性。他们只是控制内部代码是否被忽略。

这意味着......

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

...将始终应用＆＃34;其他值＆＃34; ，因为 以后放置并具有相同的特异性 。你需要反转它们，它们将按预期工作：

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

Answer 2

媒体查询应位于CSS的最低部分。如果我首先定义媒体查询;并在下面定义常规CSS，较低的匹配覆盖之前定义的。

将媒体查询放在CSS的底部是很常见的。

Answer 3

您的媒体查询规则应该是在之后常规规则。在您当前的代码中，nav li a的媒体查询规则位于第104行，一般规则位于第162行，即在媒体查询规则之后 - 因此它会覆盖先前的规则。

只需将您的媒体查询移到底部（或者根据相应的一般规则，如果您逐一了解它们），这将解决您的问题。