突出显示引导程序中的活动li

Question

      <div class="col-xs-6 col-sm-3 sidebar-offcanvas" id="sidebar" role="navigation">
        <div class="list-group">
            <a href="#" class="list-group-item">Home</a>
          <a href="#" class="list-group-item active">Quem-somos</a>
          <a href="#" class="list-group-item">FAQ</a>
        </div>
      </div><!--/span-->
    </div><!--/row-->

我上面有这个代码，我希望突出显示当前具有危险颜色的页面，但是.active类在这个特定代码中是蓝色的。

我已在样式表中尝试设置：

.active {
 background-color: red;
}

但没有效果

Answer 1

即使指定!important会起作用，这也是不好的做法，因为它会停止css级联，并且可能会导致比修复更多的问题。您需要做的就是使用选择器更加具体。

.list-group a.active { background-color: red;}

查看我的Example

Answer 2

你可以强制覆盖!important，如下所示：

.active {
    background-color: red !important;
}

Answer 3

这对我有用：

a.list-group-item.active {
        background: red;
    }