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

对于我的大学项目，我需要一个带有功能导航菜单的网站。我几乎成功地使它按我所希望的方式工作，但有一个问题我无法解决

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

这里有一个jsfiddle链接，可以说明我的问题（我还在文章末尾附上了所有代码）：

如您所见，我希望.active类的文本颜色为#333，背景颜色为#fc0。当bg颜色更改为指定颜色时，文本颜色与导航菜单其他链接的颜色相同

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

请帮忙

.ul头{
列表样式：无；
}
李局长{
浮动：左；
}
.标题a{
宽度：192px；
填充：5px0px 5px0px；
显示：块；
背景色：#cc3333；
文本转换：大写；
文本对齐：居中；
文字装饰：无；
字体系列：影响，无衬线；
字体大小：24px；
}
.标题a：链接，
.标题a：已访问{
颜色：#fff；
文字装饰：无；
}
.标题a：悬停，
.标题a：活动，
.标题a：焦点{
背景色：#cc6666；
颜色：#fff；
文字装饰：无；
}
.header.active{
背景色：#fc0；
颜色：#ccc；
}

问题是您的

.header.active

定义被

覆盖。header a:link、.header a:visted

定义。这是因为CSS遵循规则顺序，简单地说，这取决于规则的具体程度。在本例中，由于

.header a:link、.header a:visted

定义包含标记名

a

，因此它覆盖了更一般的定义

一个简单的修复方法是将标记名添加到

.active

定义中。因此，将

.header.active

更改为

.header a.active

将解决此特定问题

作为将来的参考，您可以通过在Chrome（或其他浏览器）中使用inspector来查看哪个CSS规则对该元素实际有效

有关详细信息，请参阅此堆栈溢出问题：

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

可能使用

！重要信息

顺便解决您的问题

---

我明白了。我试过使用

！重要信息

之前，但事实证明我的语法是错误的。非常感谢。非常感谢您提供了信息丰富的答案！当我试图选择

.active

类的

a

时，结果发现我的语法是错误的。现在我知道类不会覆盖元素属性。再次感谢！

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