无法覆盖媒体查询的 CSS

Question

https://codepen.io/everybodysfeelingwonderland/full/OjyRpM/

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

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

...将始终应用"another value"，因为它放在后面并且具有相同的特性。您需要反转它们，它们将按预期工作：

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