突出显示引导程序中的活动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;}

看我的例子

Answer 2

您可以像这样强制覆盖!important：

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