在 css bootstrap 中覆盖锚标记样式

Question

I am want my active link to be red:

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

When I inspect the page, the li tag is active but doesn't change the color on the site. The hover is working fine changing by color.

This is my CSS code:

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

Still, when I want to change the background color - it works. Just doesn't change color of the text.

Answer 1

You can do:

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

This way you can also get rid of the !important because it is more specific than the other rules

Answer 2

Ok, I just worked it out one moment later. I deleted "li" from the css line and it worked. Probably because .active is the class name of that li tag.

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

Hope it will help somebody else.