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仅在您实际点击链接时有效;这是你想要实现的目标吗？

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

1 个答案: