在 css bootstrap 中覆盖锚标记样式答案

【问题标题】：Overwriting an anchor tag styling in css bootstrap在 css bootstrap 中覆盖锚标记样式
【发布时间】：2019-12-30 00:17:51
【问题描述】：

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

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

不过，当我想更改背景颜色时，它仍然有效。只是不会改变文本的颜色。

【问题讨论】：

标签： html css ruby-on-rails

【解决方案1】：

你可以这样做：

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

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

【讨论】：

那就更好了。谢谢。

【解决方案2】：

好的，我稍后才解决。我从 css 行中删除了“li”，它起作用了。可能是因为 .active 是那个 li 标记的类名。

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

希望它能对其他人有所帮助。

【讨论】：