时间戳

首页 > 解决方案 > 在 css bootstrap 中覆盖锚标记样式

html - 在 css bootstrap 中覆盖锚标记样式

问题描述

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

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

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

标签： htmlcssruby-on-rails

解决方案

你可以做：

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

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

推荐阅读