覆盖 css 引导程序中的锚标记样式

Question

我希望我的活动链接是红色的：

nav class="navbar navbar-inverse">   
<div class="container col-1 col-sm-12">
<ul class="nav">     
<li class="<%= 'active' if current_page?(squad_path) %>"><%= link_to("squad", squad_path)%></li>
<li class=" <%= 'active' if current_page?(album_path) %>"><%= link_to("album", album_path)%></li>
...

当我检查页面时，li标签处于活动状态，但不会改变网站上的颜色。悬停工作正常，按颜色变化。

这是我的CSS代码：

.nav li a{                     
display: inline-block; 
padding-right: 8px;    
padding-left: 8px;     
color: #fff;           
margin-bottom: 3px;    
margin-top: 3px;       
font-size: 40px;
font-family: "Germanica";       
}       

.nav li a:hover{
text-decoration: none; 
color: #ff0000;
background-color: black;        
} 
.nav li .active a {               
color: #ff0000 !important;      
} 

不过，当我想更改背景颜色时 - 它可以工作。只是不改变文本的颜色。

Answer 1

你可以做：

.nav li.active a {               
color: #ff0000;      
}

这样你也可以摆脱!important，因为它比其他规则更具体

Answer 2

好的，我只是在一会儿后解决了它。我从 css 行中删除了"li"，它起作用了。可能是因为.active是该li标签的类名。

.nav .active a {               
color: #ff0000 !important;      
} 

希望它能帮助其他人。