无法更改导航栏中当前活动菜单项的文本颜色答案

【问题标题】：Cannot change text colour of currently active menu item in the navbar无法更改导航栏中当前活动菜单项的文本颜色
【发布时间】：2015-01-04 20:27:57
【问题描述】：

对于我的大学项目，我需要一个带有功能导航菜单的网站。我几乎已经设法让它按照我想要的方式工作，但有一个问题我无法解决。

基本上，我有一个导航栏，链接块的背景颜色为红色，链接文本本身是白色的。悬停时，背景颜色会发生变化；但是，对于我网站的每个页面，我希望该页面的菜单项与其他菜单项的颜色不同。我决定用黄色，但发现白色文本不起作用。我想把它变成深灰色，但我面临的问题是背景颜色变化很好，但文本颜色我根本无法改变，无论如何。我尝试将它放在 CSS 表中的不同位置（以防有任何东西覆盖它），但似乎没有任何效果。

这是一个 jsfiddle 链接，用于说明我的问题（我还在帖子末尾附上了所有代码）： http://jsfiddle.net/axetm8fL/

如您所见，我希望 .active 类的文本颜色为#333，背景颜色为#fc0。当背景颜色变为指定的颜色时，文本颜色与导航菜单其他链接的颜色保持一致。

我尝试专门选择 .active 类的 a，甚至 a:link 和 a:visited，但似乎没有任何帮助，在某些情况下，甚至 bg color 属性也不起作用。也许我的语法有问题，我需要以其他方式选择它？

请帮忙。

.header ul {
  list-style: none;
}
.header li {
  float: left;
}
.header a {
  width: 192px;
  padding: 5px 0px 5px 0px;
  display: block;
  background-color: #cc3333;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  font-family: Impact, sans-serif;
  font-size: 24px;
}
.header a:link,
.header a:visited {
  color: #fff;
  text-decoration: none;
}
.header a:hover,
.header a:active,
.header a:focus {
  background-color: #cc6666;
  color: #fff;
  text-decoration: none;
}
.header .active {
  background-color: #fc0;
  color: #ccc;
}

<body>
  <div class="header">
    <ul>
      <li><a href="index.html">Home</a>
      </li>
      <li><a href="fixtures.html" class="active">Fixtures</a>
      </li>
      <li><a href="contact.html">Contact Us</a>
      </li>
    </ul>
  </div>
</body>

【问题讨论】：

标签： html css navigation

【解决方案1】：

问题是您的.header .active 定义被.header a:link, .header a:visited 定义覆盖。这是因为 CSS 遵循规则顺序，简单地说，取决于规则的具体程度。在这种情况下，因为.header a:link, .header a:visited 定义包含标签名称a，它会覆盖更一般的定义。

一个简单的解决方法是将标签名称添加到您的.active 定义中。因此，将.header .active 更改为.header a.active 将解决这个特殊问题。

为了将来参考，您可以使用 Chrome（或其他浏览器）中的检查器来查看该元素实际有效的 CSS 规则。

有关更多信息，请参阅此 Stack Overflow 问题：

In which order do CSS stylesheets override?

另外，这是您的 JSFiddle，现在可以按您的预期工作：

http://jsfiddle.net/axetm8fL/3/

【讨论】：

非常感谢您提供的信息丰富的回答！事实证明，当我尝试选择 a 的 .active 类时，我的语法是错误的。现在我知道类不会覆盖元素属性。再次感谢！

【解决方案2】：

.header .active {
    background-color: #fc0 !important;
    color: #ccc !important;
}

也许使用!important 顺便解决你的问题 Demo

【讨论】：

我明白了。我之前尝试过使用!important，但事实证明我的语法错误。谢谢！