Question

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

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

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

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

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

请帮忙。

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 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规则。

Screenshot from Chrome Inspector showing the CSS rules

有关详细信息，请参阅此Stack Overflow问题：

In which order do CSS stylesheets override?

此外，这是你的JSFiddle，现在按你的意图工作：

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

Answer 2

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

可能正在使用!important解决问题 Demo

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

2 个答案: