如何覆盖 Bootstrap 的 navs.less CSS 定义？

Question

我的页面看起来像这样：

<div class="col-sm-4">
  <ul class="nav nav-pills nav-stacked nav-caret">
    <li class="active">
      <a class="nav-toggle" href="#" data-toggle="tab" data-target="#app">Item 1</a> </li>
    <li>..</li>
    ...

我希望活动li的颜色与在浏览器中进行检查时产生的默认值不同：

.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-
  pills>li.active>a:hover {
      color: #fff;
      background-color: #337ab7;
}

我尝试以两种方式将其表述为：

 .nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-
    pills>li.active>a:hover {
    color: #fff;
    background-color: #337ab7;
}
.nav-pills.navbar-toggle >li:active{
    color: #ffffff;
    background-color: #36758D;
}

在我自己的 navbar.transparent.css 文件中，但没有任何变化。

Answer 1

尝试使用：

.nav-pills > li.active > a:active {
  color: #fff;
  background-color: #36758D;
}

如果您使用与 Bootstrap 样式

表中完全相同的选择器，它应该可以正常工作，因为 CSS 特异性是相同的，并且您的规则获胜，因为它们在 Bootstrap 之后(假设您在 Bootstrap 之后导入自己的样式表，无论如何您都应该这样做(。

另请注意，只有当您实际单击链接时，:active才有效;这是您想要实现的目标吗？