css - 在 bootstrap 中突出显示事件 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